html - 如何从 div/容器中删除空格

Question

我有一个导航菜单链接，它在 div 标记底部有额外的空白，id 为 nav。这不是因为 margin 或 padding，而是有某种空白不允许 ul 标签接触到 id 为 nav 的 div 的底部。我如何让它这样做。这是 link

* {
  padding: 0;
  margin: 0;
}
#nav {
  border: 1px solid black;
  text-align: center;
  min-width: 300px;
}
#nav ul {
  padding: 10px 0;
  display: inline-block;
}
#nav li {
  float: left;
  list-style: none;
  margin-left: 50px;
}
#nav a {
  text-decoration: none;
  color: black;
  padding: 15px 10px;
}
#nav a:hover {
  color: white;
  background: black;
}

<div id="nav">
  <ul>
    <li><a href="#">link</a>
    </li>
    <li><a href="#">link</a>
    </li>
    <li><a href="#">link</a>
    </li>
    <li><a href="#">link</a>
    </li>
  </ul>
</div>

Answer 1

间隙是为下行文本元素(例如 j、y、g)保留的空间。通过添加 vertical-align:top 将其删除给你的<ul>

* {
  padding: 0;
  margin: 0;
}
#nav {
  border: 1px solid black;
  text-align: center;
  min-width: 300px;
}
#nav ul {
  padding: 10px 0;
  display: inline-block;
  vertical-align: top;
}
#nav li {
  float: left;
  list-style: none;
  margin-left: 50px;
}
#nav a {
  text-decoration: none;
  color: black;
  padding: 15px 10px;
}
#nav a:hover {
  color: white;
  background: black;
}

<div id="nav">
  <ul>
    <li><a href="#">link</a>
    </li>
    <li><a href="#">link</a>
    </li>
    <li><a href="#">link</a>
    </li>
    <li><a href="#">link</a>
    </li>
  </ul>
</div>

请注意，由于您对 #nav a 应用了填充，因此列表项会在 div 下方突出。可以调整。