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

中看到该演示

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

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 
}

<强> Live Demo

------

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

ul{
white-space:nowrap;
}

的 Updated Demo 的

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

2 个答案:

------