html - 为什么浏览器向我的 LI 中注入(inject)空间？

Question

我遇到了一个我以前从未注意到的奇怪问题。我有以下代码:

<div class="feedback">
  <span> Was this helpful?</span>
  <ul>
    <li>
      <a href="#">Yes</a>
    </li>
    <li>
      <a href="#">No</a>
    </li>
    <li>
      <a href="#">No</a>
    </li>
  </ul>
</div>

非常简单的代码块。忽略第二个否，因为它实际上只是给我第三个 li 来帮助我解决这个问题。现在，这是 CSS...

div.feedback {
  position: relative;
}
span {
  float: left;
}
li {
  display: inline-block;
  padding: 0;
  margin: 0;
  border-left: 1px solid #000
}

现在，这是正在发生的事情:

看到似乎不知从何而来的额外间距了吗？我移动到 border-right 只是为了测试它，结果更加不一致:

现在，第 3 个 LI 有 0 个 padding 和 margin，这是应该的。另外两个还有空余空间。

最后，浏览器理解 li 的正确 height 和 width，并且没有属性 margin 或padding 到它。根据浏览器，文本应该在边框上被粉碎，正如我所期望的那样。

谁能解释一下文本右侧额外的 3-5 像素间距是什么？

Answer 1

那是因为换行符在 HTML 中被视为空格。您已将内部元素指定为 inline-block ，这意味着显示它们之间的空格。

您可以:

1. 将父级的字体大小设置为 0，然后在 <li> 上恢复正常,
2. 简单地消除<li>之间的换行符s.

---

存在第三个(较小的)选项，它是使用 float .

float最初是为了允许将元素推到容器的边缘，同时让文本在其周围自由流动(如报纸中的图像)。当人们发现它会使 block 级元素水平堆叠时，该功能也被利用用于布局。

使用 float意味着你需要 clear在你自己之后，通过使用 clearfix ，或具有 clear: both 的元素设置它。

这个选项较少，因为它很像表格布局，它不是 float 的初衷，实现可能因浏览器和时间段而异，但最重要的是，它增加了清算的开销问题。 (如果可以的话，请坚持使用 display: inline-block!)