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

Question

The space between horizontal and vertical list item appears differently, even through the margin, padding, height and width are exactly the same for both layouts. I would like them to be the same, I know I can manually adjust the margins or paddings, but why are they not the same, is there a simple way to keep them consistent? thanks.

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

see the result here: http://jsfiddle.net/bingjie2680/3ZbkQ/

Answer 1

The vertical li 's margin are collapsing . You can get around this with:

.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

Answer 2

Read this: http://www.w3.org/TR/CSS21/box.html#collapsing-margins Your vertical margin is collapsing, cause your elements are 'next' to each other. In difference to that, horizontal margins are not collapsing.