DOCTYPE affects rendering of line-height

Question

This one's a head scratcher.

I've created a commented jsFiddle to demonstrate the phenomenon I recently encountered while using Twitter's Bootstrap framework to create some dropdown buttons.

http://jsfiddle.net/jackwanders/WKvPv/

Basically, when using an HTML5, HTML 4 Strict or XHTML Strict DOCTYPE, the button renders as designed. However, when using an HTML4 or XHTML Transitional DOCTYPE, the caret button renders with a shorter height. Here's the relevant CSS from Bootstrap for the <span class="caret"> (i've removed styles that don't matter, like colors and gradients):

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: top;
  border-top: 4px solid #000000;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  content: "";
}

.btn .caret {
  margin-top: 7px;
  margin-left: 0;
}

.btn {
  display: inline-block;
  *display: inline;
  padding: 4px 10px 4px;
  margin-bottom: 0;
  *margin-left: .3em;
  line-height: 18px;
  *line-height: 20px;
  text-align: center;
  vertical-align: middle;
}

Why does the DOCTYPE affect the height of the button? If line-height is set to 18px, why would the height be less than 18px?

PS - Yes, I'm aware that Bootstrap requires HTML5, but I'd imagine that's with respect to the HTML5 features utilized, not how the DOCTYPE renders CSS styles

Answer 1

While writing this question and the related jsFiddle demo, I wound up doing some more digging and found out what's happening. Rather than scrap the question, I figured I may as well post it with this answer.

What I've gathered from inspecting the elements in Chrome after switching DOCTYPES is this:

• .btn has no height specified, only line-height: 18px and padding: 4px 10px
• in HTML5, the final height of the caret-only button is 18px, same as the defined line-height
• in a Transitional DOCTYPE, the height of the caret-only button is 11px, same as the outerHeight() of the caret (border-top + margin-top), but less than the line-height of the button.

So, I can only assume that Strict (and HTML5) DOCTYPEs enforce line-height as some kind of min-height; even if there is no text in the element, it applies line-height ... whereas Transitional DOCTYPES do not.

When I add some text to the caret-only button (  for example), then line-height kicks in on Transitional DOCTYPEs and the button renders at the full height.