内联块列表项之间的空格

Question

可能重复：

行内块列表项中不需要的边距

如何从 HTML 中删除“不可见空间”

为什么 inline-block 列表项中有空格？无论我如何将列表项放入菜单中，我总是会得到空格。

 li {
  border: 1px solid black;
  display: inline-block;
  height: 25px;
  list-style-type: none;
  text-align: center;
  width: 50px;
}

ul {
  padding: 0;
}

 <ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

原文由 Tyler Crompton 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我以前看过这个并回答过：

经过 进一步研究，我发现 inline-block 是一种依赖空白的方法，并且依赖于字体设置。在这种情况下，渲染了 4px。

为避免这种情况，您可以在一行中一起运行所有 li s，或者像这样一起阻止结束标记和开始标记：

>  <ul>
>         <li>
>             <div>first</div>
>         </li><li>
>             <div>first</div>
>         </li><li>
>             <div>first</div>
>         </li><li>
>             <div>first</div>
>         </li>
> </ul>
>
> ```

[这里的例子](http://jsfiddle.net/Kyle_Sevenoaks/t7dut/)。

* * *

如其他答案和评论所述，解决此问题的最佳做法是将 `font-size: 0;` 添加到父元素：

ul { font-size: 0; }

ul li { font-size: 14px; display: inline-block; }

”`

这对于 HTML 可读性更好（避免将标签一起运行等）。间距效果是因为字体的间距设置，所以你必须为内联元素重新设置它并为其中的内容重新设置它。

原文由 Kyle 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

解决方案：

 ul {
    font-size: 0;
}

ul li {
    font-size: 14px;
    display: inline-block;
}

您必须将父字体大小设置为 0

原文由 David Horák 发布，翻译遵循 CC BY-SA 3.0 许可协议