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

Question

我有一个导航菜单链接，在 div 标签的底部有额外的空格，id 为 nav。这不是因为边距或填充，而是有某种空格不允许 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 下方突出显示。

Answer 2

要解决您的问题，请执行以下操作：

将#nav ul 更改为：

#nav ul {
    padding: 10px 0;
}

将#nav li 更改为：

#nav li {
    display: inline-block;
    list-style: none;
    margin-left: 50px;
}

Answer 3

从您的#nav li 中删除margin-left: 50px;。它会在您的菜单上创建不需要的空白。菜单的宽度将取决于文本的长度

Answer 4

似乎与内联块有关。 inline-flex 或 display: table 没有空间；

#nav ul {
  padding: 10px 0;
  display: inline-flex;
  background-color: black;
}

inline-block 最大的问题是它对字体的处理，它会在每个元素之后添加一个 4 到 5px 的幽灵“填充”，具体取决于浏览器。

这是一个使用 font-size: 0 方法来否定效果的重写。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box; /* allow percentages to be calculated without border and padding messing things up */
}
#nav {
  border: 1px solid black;
  min-width: 300px;
}
#nav ul {
  list-style-type: none;
  font-size: 0; /* font-size: 0; is a method to remove the ghost padding added after inline-blocks, one of the many reasons display: flex is becoming so popular */
}
#nav li {
  display: inline-block;
  width: 25%; /* control width here */
  text-align: center;
}
#nav a {
  display: block; /* allow element to expand to match parent size by changing from <a> default display: inline to block */
  text-decoration: none;
  color: black;
  font-size: 15px; /* reset font-size here */
  line-height: 30px; /* control element height here */
}
#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>

小提琴

https://jsfiddle.net/Hastig/wfrxgxjm/