Why would the height increase with a smaller font size?

Question

I have a block with a certain line-height, where I insert content with the ::before pseudo element.

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


        

Answer 1

Edit: This question has had quite a number of new eyeballs lately, so here's an update to make it more useful.

---

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

So allow me to clarify the solution a bit, with pictures.

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

Now let's assume a font with a 1/4 descender. That is, if you have a 20px font, the descender is 5 pixels and the ascender 15 pixels. The remaining line-height (in this case, 40 pixels) is then divided equally above and below the baseline, like this.

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

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

Hope this explains things!