How does reducing font size cause height to increase?

Question

I have a block with a specific line height in which I insert content with a ::before pseudo-element.

.block::before {
  content:'text here';
}

This works very well. However, if I also give the content a smaller font size

.block::before {
  font-size:.6em;
  content:'text here';
}

The blocks actually get taller. why is that?

.container {
    display:inline-block;
}
.lorem, .ipsum, .dolor, .sit {
    line-height:3em; border:1px solid green
}
.ipsum:before {
    content:'world!';
}
.sit:before {
    font-size:.6em;
    content:'world!';
}

<div class="container">
    <div class="lorem">Hello</div>
</div>
<div class="container">
    <div class="ipsum"></div>
</div>
<hr style="clear:both"/>
<div class="container">
    <div class="dolor">Hello</div>
</div>
<div class="container">
    <div class="sit"></div>
</div>

The top row has no font size change, the bottom row does.

Now I found a possible solution is to set the line-height of the pseudo-element to 0. Or to 1em. Or even to normal. So what happened? By setting the font size to .6em is it setting the line-height to some weird value? Why?

PS Although this may seem like a duplicate (see the list on the right), none of the answers I've read so far explain why setting line-height:normal would solve the problem. Something must be happening to implicitly set the row height to a larger value. This is what I want to find out.

Answer 1

Edit: This question has gotten a lot of new attention lately, so it's been updated here to make it more useful.

---

Alohci's solution is correct, but may not be absolutely clear to the more graphically inclined.

So please allow me to clarify the solution with pictures.

First, line-height inherits the size it is calculated for, so although it is specified in em units, children will inherit the value in pixels. For example, if the font size is 20px and the line height is 3em, the line height will be 60 pixels, even for descendants with different font sizes (unless they specify their own line height) .

Now let's assume the font has a 1/4 descender. That is, if you have a 20px font, the descender is 5 pixels and the ascender is 15 pixels. Then divide the remaining line height (40 pixels in this case) equally above and below the baseline, as shown below.

For blocks with smaller fonts (0.6em or 12 pixels), the remaining amount of line height is 60-12 or 48 pixels, which is also divided equally: 24 above the baseline and 24 below.

Then if we combine the two fonts on the same baseline, you'll see that the line heights are not divided the same way, so the total height of the containing block increases, even though both line heights are 60 pixels.

Hope this explains everything!

Answer 2

The height of the .lorem, .ipsum, .dolor, and .sit boxes is the height of their containing single-line box.

The height of each line box is the maximum of the height above the baseline of the line's pillars and the maximum height below the baseline of the text in the line. Because the pillars and text are aligned on the baseline.

For clarity, the height (in em) below refers to the font size of the entire container (i.e. the body element)

In .ipsum (font size 1em), height above baseline of pillars and text is 1em (top half leading) 13/16em (riser, approx.), height below baseline is 1em (half line leading) 3 /16em (descending part, approx.) 1em (before the second half of the line), 3em in total.

In .sit (font size 0.6em), the height above the baseline is the maximum of [1em (upper half leading) 13/16em (rising part, approx. pillars)] and [1.2] em (upper half leading) 0.6 x 13/16em (rising part, approx.), height below baseline is [1em (lower half leading) 3/16em (rising part, approx.) maximum in descending part, approx.) for pillars] and [1.2em (lower half leading) 0.6 x 3/16em (falling part, approx.) for text].

Evaluating this and converting to decimals gives 1.8125em above baseline, 1.3125em below baseline, for a total of 3.125em, which is 3em greater than .ipsum.