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

score 11 · Accepted Answer · answered Jun 29 '12 at 20:30

11

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.

answered Jun 29 '12 at 20:30

jackwanders

15,612
3
40
40

Transitional DOCTYPEs trigger what's called almost standards mode, which is basically standards mode with a few quirks. Since this has to do with the box model, you *may* be running into one of those quirks, but I don't know for sure... – BoltClock Jun 29 '12 at 22:25
I recently came across [this Microsoft page](http://msdn.microsoft.com/en-us/library/ff405794%28v=vs.85%29) which describes the line-height handling differences of almost standards mode. I discuss it in [this answer](http://stackoverflow.com/questions/11206730/html5-vs-html4-h1-tag-rendered-with-extra-space-how-to-remove/11217791#11217791) which is also relevant to your question. In particular, it is the absence of the handling of the strut which causes the difference that you see. – Alohci Jun 30 '12 at 00:01
1

Just hit this issue. it is 2016 outside, but we're still dealing with the same issues :( thank you for your answer anyway! – vmg Nov 01 '16 at 19:42
Thanks! Just ran into this exact issue. – JW. Oct 26 '21 at 17:27

DOCTYPE affects rendering of line-height

1 Answers1

Linked