Why would the height increase with a smaller font size?
css, html
Solution
The height of the .lorem, .ipsum, .dolor, and .sit boxes is each the height of the single line box that they contain.
The height of each line box is the maximum of the height above the baseline + the maximum height below the baseline of the strut of the line and the text in the line. since the strut and the text are aligned on the baseline.
For clarity, heights below in em, refer to the font size of the overall container (i.e. the body element)
In .ipsum, (where the font size is 1em) the height above the baseline is 1em (the upper half-leading) + 13/16em (the ascender, approx) for both the strut and the text, and the height below the baseline is 1em (the half-leading) + 3/16em (the descender, approx) + 1em (the lower half-leading) making a total of 3em.
In .sit (where the font size is 0.6em) the height above the baseline is the maximum of [1em (the upper half-leading) + 13/16em (the ascender, approx) for the strut] and [1.2em (the upper half-leading) + 0.6 x 13/16em (the ascender, approx) for the text], and the height below the baseline is the maximum of [1em (the lower half-leading) + 3/16em (the descender, approx) for the strut] and [1.2em (the lower half-leading) + 0.6 x 3/16em (the descender, approx) for the text].
Evaluating that and converting to decimal gives 1.8125em above the baseline and 1.3125em below the baseline making a total of 3.125em, which is larger that the 3em of .ipsum.
Problem
I have a block with a certain line-height, where I insert content with the `::before` pseudo element. ``` .block::before { content:'text here'; } ``` This works well. However, if I also give the content a smaller font size ``` .block::before { font-size:.6em; content:'text here'; } ``` the block actually becomes higher. 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 doesn't have font size changes, the bottom row does. Now I found out that a possible solution is to set the `line-height` of the pseudo element to `0`. Or to `1em`. Or even to `normal`. So what is going on? Is the `line-height` set to some weird value by setting the font size to `.6em`? Why? PS Although this looks like a duplicate (see the list to the right), none of the answers I've read so far explains why setting `line-height:normal` solves the issue. There must be something happening that sets the line-height to a greater value implicitly. And that's what I'm trying to find out.