空白空間上方導航欄

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