空白空间上方导航栏

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