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

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;}

你可以在here看到演示

我的困惑是，我已经把所有的margin和padding设置为0了，为什么这里还有gap？直到我必须设置 float: left 来清除间隙

Answer 1

试试这个 html

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

工作 jsfiddle

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