css - 如何删除内联块产生的额外边距空间？

Question

标记在这里：

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

* {margin: 0; padding:0;}
ul{ border: 1px solid black; height: 100px;width:100%; display:block;} 
li{display:inline-block;width: 200px; height: 100px; background: red;}

你可以在这里看到演示

我的困惑是，我已经将所有边距和填充设置为零，为什么这里还有差距？直到我必须设置float: left以清除差距

​</p>

Answer 1

试试这个 html

<ul>
     <li></li><!--
  --><li></li><!--
  --><li></li>
</ul>

工作jsfiddle

您还可以在这篇 css-tricks 文章中找到解释和其他解决方案： Fighting the Space between Inline Block Elements

Answer 2

现在只需在样式表中添加这个 css

ul{
font-size:0;
}
ul li{
font-size:12px; // according to your design 
}

现场演示

------

如果您将所有 li 设置在一行中而不是定义此

ul{
white-space:nowrap;
}

更新的演示