The issue with the spacing between horizontal and vertical list items is perplexing. Despite having identical margin, padding, height, and width, they seem to display differently. While manual adjustment of margins or paddings can resolve this, I am curious why they are not consistent to begin with. Is there a straightforward method to ensure uniformity in spacing? Thank you.
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;
}
View the outcome here: http://jsfiddle.net/bingjie2680/3ZbkQ/