This morning I finally cracked a CSS mystery that has stumped me since I began using CSS! The solution, so obvious.
A little background:
- Inline elements cannot have a line-height.
- line-height is required to limit border height to the height of your text
So, if you have an inline list:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
ul li { display: inline; margin-left: 5px; padding-left: 5px;
font-size: 12px; border-left: 1px solid #000; }
ul li:first-child { margin-left: 0; padding-left: 0; border: 0; }
The border will be a few pixels taller than the text, because it is not restricted by a line-height.
However, if we convert the list items to block-level elements and left-float them, we can assign a line-height, forcing the border to match the text height:
ul li { display: block; float: left; margin-left: 5px; padding-left: 5px;
font-size: 12px; border-left: 1px solid #000; line-height: 12px; }