Whitespace über der Navigationsleiste

Question

Ich habe bereits Body Margin und Padding auf 0 gesetzt. Es gibt jedoch immer noch Leerraum über meiner Navigationsleiste und unter dem Bild darüber, dass ich nicht herausfinden kann, wie zu entfernen.

*, 
 
html, 
 
body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
* { 
 
    font-family: Arial, sans-serif; 
 
} 
 

 
.nav { 
 
    width: 750px; 
 
    margin: 0 auto; 
 
    list-style: none; 
 
} 
 

 
.nav ul { 
 
    font-size: 0; 
 
} 
 

 
.nav li { 
 
    display: inline-block; 
 
    border-right: 1px solid black; 
 
    padding: 10px 30px 10px 30px; 
 
    font-size: 22px; 
 
    font-weight: 700; 
 
} 
 

 
.nav li:first-child { 
 
    border-left: 1px solid black; 
 
} 
 

 
.nav li:hover { 
 
    background-color: #00FFFF; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
}

<img src="image.jpg" alt="image cannot be displayed" style="width: 100%; height:150px;" /> 
 
<div class="nav"> 
 
    <ul> 
 
    <li><a href="index.html">Home</a></li> 
 
    <li>Second Page</li> 
 
    <li>Third Page</li> 
 
    <li>Fourth Page</li> 
 
    </ul> 
 
</div>

Answer 1

gesetzt Entweder display: block; auf Ihrem Bild oder wickeln Sie sie in einem div. Der Leerraum ist im Wesentlichen ein einzelner Raum, der aufgrund der img-Tag-Stile angezeigt wird, die standardmäßig display: inline sind.

Answer 2

img { 
    display: block; /*add this or set container's font-size to 0 */ 
} 
body { 
    padding: 0; 
    margin: 0; 
    font-size: 0; /*add this, otherwise change the img to block*/ 
}