内联块列表项之间的空格[重复]

可能的重复：
内联块列表项中不需要的边距 https://stackoverflow.com/questions/4969082/unwanted-margin-in-inline-block-list-items
如何从 HTML 中删除“不可见空间” https://stackoverflow.com/questions/12183341/how-to-remove-invisible-space-from-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>

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

After 进一步的研究 http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/我有 发现inline-block是一个 依赖于空白的方法和 取决于字体设置。在本例中，渲染了 4px。

为了避免这种情况，你可以运行你所有的li一起排成一行或一块 结束标签和开始标签在一起 像这样：

<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 可读性更好（避免将标签一起运行等）。间距效果是由于字体的间距设置造成的，因此必须为内联元素重置它，并为其中的内容重新设置它。