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

标记如下：

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

*{边距：0；填充：0；}
ul{边框：1px纯黑色；高度：100px；宽度：100%；显示：块；}
li{显示：内联块；宽度：200px；高度：100px；背景：红色；}

您可以在中看到演示

我的困惑是，我已经将所有的边距和填充设置为零，为什么这里仍然有间隙？直到我必须设置

浮动：left

以清除间隙

---

​

现在只需在样式表中添加此css即可

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

------ 如果在一行中设置所有li，则定义该li

ul{
white-space:nowrap;
}

试试这个html

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

工作

另外您可以在这篇css技巧文章中找到解释和其他解决方案：