Why does height increase with smaller font size?

Question

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

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

It works well. However, if I also give content a smaller font size

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

the block actually gets taller. Why is this?

JsFiddle The top line has no font size changes, the bottom line does.

Now I figured out that a possible solution is to set the line-height pseudo line-height element to 0 . Or up to 1em . Or even to normal . So what's going on? Is the line-height parameter set to some weird value by setting the font size to .6em ? Why?

PS Although this sounds like a duplicate (see the list on the right), not one of the answers I have read so far explains why setting line-height:normal solves the problem. There must be something going on that indirectly sets the line height for a larger value. And this is what I am trying to find out.

Answer 1

The height of the .lorem, .ipsum, .dolor, and .sit fields is the height of the single string block in which they are contained.

The height of each line window is the maximum height above the baseline + the maximum height below the baseline of the rack of the line and the text in the line. as the stand and text are aligned on the baseline.

For clarity, the heights given below in em refer to the font size for a common container (i.e. body element)

In .ipsum (where the font size is 1em), the height above the baseline is 1em (top half of the lead) + 13 / 16em (stand, approximate) for the stand and text, and the height below the baseline is 1em (half of the lead) + 3 / 16em ( descender, approx) + 1em (lower half of the lead), totaling 3em.

In .sit (where the font size is 0.6em), the height above the baseline is the maximum [1em (upper upper) + 13 / 16em (clip, approximate) for the rack] and [1.2 em (upper half) + 0.6 x 13 / 16em (height, approximate) for text], and the height below the baseline is a maximum of [1em (bottom half) + 3 / 16em (descender, approx) for the rack] and [1.2em (bottom half) + 0.6 x 3 / 16em (descender, approx) for text].

Evaluation and decimal conversion yields 1.8125em above the baseline and 1.3125em below the baseline, which adds up to 3.125em, which is more than 3em.ipum.

Answer 2

Edit: Recently, this question has had quite a few new eyeballs, so it is updated here to make it more useful.

---

Alohci's solution is correct, but this may not be entirely clear for more graphically-inclined ones.

So let me clarify the solution with the pictures a bit.

Firstly, the height of the line is inherited as its calculated size, therefore, although it is specified in units of em , children inherit the 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 suppose the font has 1/4 descender. That is, if you have a 20px font, the descender is 5 pixels and the 15-pixel font is 15 pixels. The remaining line length (in this case 40 pixels) is then divided evenly above and below the baseline, like this.

For a block with a smaller font (0.6em or 12 pixels), the remaining number of lines is 60-12 or 48 pixels, which is also 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 equally, so the total height of the block containing the block increases, although both line heights are 60 pixels.

Hope this explains things!

Answer 3

Hi, please add a certain height to your drawer ...

 .lorem, .ipsum, .dolor, .sit { border:1px solid green; height:30px;/*changes*/ } 

Fiddle : http://jsfiddle.net/jxf29/

Answer 4

The font property on .sit: before affects this, the css content property very closely matches the css properties of the current element,

Because of this, you can manipulate the value of the content property in the same style as the content property.

eg

 sit { color: green; } sit:before{ content: "text-here"; color: red; } 

This will emphasize red.