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:

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

Why follow me on Twitter?

  • I tweet about new technologies, services or libraries I find interesting
  • Yeah, sometimes I'll post a pet-peeve or rant about something trivial
  • If I discover something that made my web development life easier, I share it
  • I'll shout out any handy tip that I think might be useful to other devs


Tagged .

Updated: 2011-05-13

Phil LaNasa follow us in feedly