导航栏上方的空白区域

Question

我已经将身体边距和填充添加到0.但是，导航栏上方和上方图像下方仍有空白区域，我无法弄清楚如何移除。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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