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??