Dziwne zachowanie elementów div po elemencie img

0

Mam taki oto kod html

<!DOCTYPE html>
<html lang = "pl">

 <head>
   <title>Nord Team service</title>
   <meta charset = "utf-8">
   <meta name= "viewport" content="width=device-width, initial-scale=1">
   <meta name= "description" content = "Ogrzewanie, wentylacja, klimatyzacja, kotły">
   <link rel="stylesheet" href="stylerocco.css">
   <link href='http://fonts.googleapis.com/css?family=Alegreya+Sans+SC&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
 </head>

 <body>

    <div id = "szczyt">
          <div style = "display : inline-block; height : 62px; width : 19.5%;""><img src="logo_rocco.jpg"/></div>
           <div class = "przycisk-nawigacji"  ><a href = "nowosci.html" >Nowości</a></div>
           <div class = "przycisk-nawigacji"  ><a href = "nowosci.html" >Serwis</a></div>
           <div class = "przycisk-nawigacji" ><a href = "nowosci.html" >Sklep</a></div>
           <div class = "przycisk-nawigacji" ><a href = "nowosci.html" >Kontakt</a></div>
    </div>

</body>
</html>

Oraz css

body {
 background-color : gray;
}

#szczyt { 

width : 90%; 
margin : 0 auto;
height : 65px;
position : relative; left : 1%;
}

.przycisk-nawigacji 
{
display : inline-block;
min-width: 19.5%;
height : 62px;
 color : black;
text-align : center;
font-size : 27px;
line-height : 62px;
background-color : #C70C18;
cursor : pointer;
border : 1px solid black;
font-family: 'Alegreya Sans SC', sans-serif;

}

.przycisk-nawigacji:hover
{
 background-color : #F70A1A;
}

a {text-decoration : none;
  color : black;

}

No i problem jest taki, że z jakiegoś dziwnego powodu przyciski nawigacji są przesunięte w dół na oko o jakieś 20-30 px. Kompletnie nie rozumiem dlaczego tak się dzieje. Jeśli zamiast obrazka wstawię jakiś tekst to przyciski ładnie układają się w jednej lini wraz z tekstem. Gdy wstawiam obrazek o wymiarach 152 px x 63 px to tak jak wspomniałem przyciski nawigacji zsuwają się w dół.

Wiem, że mogę użyć position : relative. Ale bardzo zastanawia mnie skąd to się bierze??

1

Na początek radzę stosować reset css.
Jeśli stosujesz display: inline-block to zastosuj również vertical-align np middle

0

Spoko a wiesz co jest przyczyną takiego stanu rzeczy?

1

Stosując display-blook musisz brać pod uwagę vertical-align, który domyślnie jest ustawiony (chyba) na baseline.
'Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline. (my emphasis)'

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0