列表项上的神秘间距

Question

这是我的代码：http://jsfiddle.net/spadez/FbADY/11/

尽管我使用此代码：

 * {
    margin:0;
    padding:0;
}

项目之间似乎仍有空格。在Google Chrome开发人员栏中，它表示他们没有边距或填充来导致它。

Answer 1

Demo Fiddle

这是因为li项显示为内联，因此在您的代码中，每个项目出现在一个新行上时，它将作为空格输出。您可以通过更改CSS来逃避这一点：

ul {
    font-size:0;
}

这使得项目之间的“错误”空间的大小为零，例如不可见，因此不占空间。内联元素被解释为与文本内容有效相同，因此在代码中将其与换行符等分开，这就成了一个空间。另一种解决方案是将项目向左浮动（float:left）或将所有li项放在HTML中的单行上。

NB。如果您使用上面的大小调整选项，您可能希望重置font-size上的li（例如16px等）。

Answer 2

因为如果您使用display: inline-block，它还会包含li之间的空格。

删除li之间的空格或使用float: left代替display: inline-block。

请参阅http://jsfiddle.net/sjroesink/FbADY/12/

Answer 3

它是display：inline-block属性，它在前端可视化地呈现源中的空白。

如果要保留内联块显示属性，可以通过将所有元素串在一起来删除HTML中的空格，例如：

   <ul><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li></ul>

它并不漂亮，但它解决了这个问题。

您还可以考虑使用display：table-cell进行水平布局，或者使用上面建议的浮点数。