Different spacing between horizontal and vertical list item

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.