为什么浏览器会在我的LI中注入空间？

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只是为了测试它，并得到更多不一致的结果：

现在，第三个LI有0 padding和margin。另外两个还有一个空余空间。

最后，浏览器会理解height的正确width和li，并且不对margin或padding进行归属。根据浏览器的说法，正如我所料，文本应该被打破边界。

有人可以解释一下这个额外3-5个像素的间距是在文本的右边吗？

Answer 1

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

你可以：

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

---

存在第三个（较小）选项，它使用float。

float最初的意思是允许元素被推到容器的边缘，同时让文本自由地流动（如报纸中的图像）。该功能也被利用用于布局，当人们发现它会使块级元素水平堆叠。

使用float意味着您需要clear之后，使用 clearfix ，或者设置clear: both的元素在它上面。

这个选项较小，因为很像表格布局，它不是float的最初目的，浏览器之间和时间段之间的实现可能不同，但最重要的是，它增加了清算的开销问题。 （如果你能提供帮助，请坚持使用display: inline-block。）

Answer 2

它来自代码中的空白区域。见 jsFiddle example

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

Answer 3

某处你有一个显示：inline-block。

内联块显示的行为与此类似。它将代码和换行符中的任何空格显示为空格。

您必须手动删除HTML中的空格和返回，或者将显示更改为其他内容。