ナビゲーションバーの上の空白

Question

ボディマージンとパディングを0に追加しました。ただし、ナビゲーションバーの上とその上の画像の下に空白が残っていますが、削除方法はわかりません。

*, 
 
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

のいずれかがあなたのイメージにdisplay: block;を設定したり、divでそれをラップします。空白はimgタグのスタイルがデフォルトでdisplay: inlineになっているため、本質的に単一のスペースです。

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*/ 
}