Question

请参阅jsfiddle。

.li适合.box（粉红色），但当.box显示：table（黄色）时，li和.box之间有差距。我检查过，没有边距或填充。

如何消除差距？

        <ul>
            <li>
                <div class="box table">table</div>
            </li>
            <li>
                <div class="box">box</div>
            </li>
        </ul>

Answer 1

由于班级表使用的是display: table，因此您将获得最高限额。

您可以使用display: block

来避免这种情况

另一种选择是使用

-webkit-margin-before: -18px;

它也会删除顶部的边距。

display: table将在所有webkit浏览器中添加边距。所以我只为webkit浏览器添加负余量。

Answer 2

1 /问题仅出现在Chrome中，而不是出现在Firefox中

2 /问题可能在于列表项的默认显示：http://jsfiddle.net/MjxzX/11/（我在列表上带回了左边的填充，而在LI上有边距+填充）。 display: table将强制内容占据整行，它会赋予块格式上下文，它具有非常特殊的效果，可能是相关的（虽然我不确定。编辑：Mmh可能不会因为Firefox不显示它同样的方式......）

3 /您可以在列表项 display: block上应用或删除他们的项目符号（编辑：list-style-type: none），这将解决您在Chrome上的问题：resp。 http://jsfiddle.net/MjxzX/13/和http://jsfiddle.net/MjxzX/12/

为什么显示：表格提供额外的间距？

2 个答案: