SiteKickr Web Development

CSS borders taller than text

This morning I finally cracked a CSS mystery that has stumped me since I began using CSS! The solution, so obvious.

A little background:

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