Why does unitless line-height behave differently from percentage or em in this example?

user_1486915 0
Viewed 15254

I'm perplexed by the behavior of the following CSS, also illustrated in this fiddle.

<style type="text/css">
p {
    font-size: 14px;
}

.percentage {
    line-height: 150%;
}

.em-and-a-half {
    line-height: 1.5em;
}

.decimal {
    line-height: 1.5;
}

.smaller {
    font-size:50%;
}

.caption {
    font-weight: bolder;
    font-size: 80%;
}

</style>

<p class="caption">default line spacing</p>

<p>This tutorial provides a brief introduction to the
programming <span class="">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>

<p>This tutorial provides a brief introduction to the
programming <span class="smaller">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>


<p class="caption">line-height: 150%</p>

<p class="percentage">This tutorial provides a brief introduction to the
programming <span class="">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>

<p class="percentage">This tutorial provides a brief introduction to the
programming <span class="smaller">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>


<p class="caption">line-height: 1.5em</p>

<p class="em-and-a-half">This tutorial provides a brief introduction to the
programming <span class="">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>

<p class="em-and-a-half">This tutorial provides a brief introduction to the
programming <span class="smaller">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>


<p class="caption">line-height: 1.5</p>

<p class="decimal">This tutorial provides a brief introduction to the
programming <span class="">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>

<p class="decimal">This tutorial provides a brief introduction to the
programming <span class="smaller">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>

The first two paragraphs have default line spacing. The second paragraph has one word that is smaller. But it doesn't affect the line spacing in that paragraph. Not that it should, but then —

The next two paragraphs have line-height: 150%. Again, the second paragraph has one word that's smaller. But this time, for reasons unclear, the smaller font creates extra space between the first two lines (at least in Safari, Chrome, Firefox and Explorer). This is the original problem in my CSS that I was trying to fix. (I speculate that it has something to do with the browser shrinking the word and then shifting it downward vertically to realign the baselines.)

The next two paragraphs have line-height: 1.5em. My understanding is that 1.5em is the same as 150%. And indeed, the behavior is the same: extra space between the first two lines of the second paragraph.

But here's where it gets weird: the next two paragraphs have line-height: 1.5 — no unit specified. This time, the extra-space problem disappears.

In sum, CSS seems to be giving consistent line-spacing results when the line heights of the parent & child are different (through inheritance of the unitless value) but inconsistent results when the line heights of the parent & child are the same.

Thus my questions:

  1. I know there's an intentional semantic difference in the CSS spec between 1.5 and 150% or its synonym, 1.5em. (Namely: a unitless value is passed to the child element and its line height is calculated using the child's font size, whereas a percentage or em value will cause a line height to be calculated for the parent, and then that calculated value is passed to the child.) But how does this account for the difference in behavior seen here? Where is the extra space coming from? If it's a consequence of some CSS positioning rule, then what is that rule?

  2. Or, if these examples should all render the same way, then which one is implemented incorrectly? (Note on Q2: The fact that the rendering quirk happens the same way across different browsers strongly suggests that none of them are implemented incorrectly, which will take you back to question (1).)

  3. In practical terms, is there a downside to switching to unitless measurements like 1.5 for line-height? (Answer: no)

css html
4 Answers
Related