水平和垂直列表項之間的間距不同

Question

水平和垂直列表項之間的空間顯示不同，即使兩種布局的邊距，填充，高度和寬度也完全相同。 我希望它們相同，我知道我可以手動調整邊距或填充，但是為什么它們不相同，是否有一種簡單的方法可以使它們保持一致？ 謝謝。

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/

Answer 1

垂直li的邊距正在崩潰 。 您可以通過以下方法解決此問題：

.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 */
}

更新的小提琴

Answer 2

閱讀以下內容： http : //www.w3.org/TR/CSS21/box.html#collapsing-margins您的垂直邊距正在崩潰，因為您的元素彼此“相鄰”。 與此不同的是，水平邊距沒有崩潰。