水平和垂直列表项之间的不同间距答案

【问题标题】：Different spacing between horizontal and vertical list item水平和垂直列表项之间的不同间距
【发布时间】：2014-04-07 17:42:17
【问题描述】：

水平和垂直列表项之间的空间看起来不同，即使两个布局的边距、填充、高度和宽度完全相同。我希望它们相同，我知道我可以手动调整边距或填充，但为什么它们不一样，有没有简单的方法来保持它们一致？谢谢。

HTML

<ul class="horizontal">
    <li></li>
    <li></li>
    <li></li>
</ul>
<div class="clear"></div>
<ul class="vertical">
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS

ul li {
    padding: 0;
    margin: 10px;
    width: 13px;
    height: 13px;
    background: #333333;
    border-radius: 50%;
}

.horizontal li {
    float: left;
}

在此处查看结果：http://jsfiddle.net/bingjie2680/3ZbkQ/

【问题讨论】：

我猜这与保证金崩溃有关。如果您删除边距，您会得到：jsfiddle.net/Paulie_D/3ZbkQ/1
就像上面的 cmets 中提到的，它与折叠边距有关。在CSS-Tricks 上阅读有关边距（和折叠）的更多信息
顺便说一句，当您将float:left 样式应用于水平列表时，这意味着这两个列表是不同的，与您描述的不同。这就是你的问题发生的原因。一个列表是浮动元素，另一个是内联元素，浮动元素不受边距折叠规则的影响。

标签： html css

【解决方案1】：

阅读：http://www.w3.org/TR/CSS21/box.html#collapsing-margins 您的垂直边距正在折叠，因为您的元素彼此“相邻”。与此不同的是，水平边距不会折叠。

【讨论】：

【解决方案2】：

li 的垂直边距为collapsing。您可以通过以下方式解决此问题：

.vertical li {
    float: left; /*a floated box's margin does not collapse with any other box */
    clear: left; /* Push each succeeding li to a new line, 
                    though not needed on the first */
}

Updated fiddle

【讨论】：

@bingjie2680：没问题。