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';
}

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.

Mr Lister · Answer 1 · 2015-06-27T15:17:16.383

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.

font 20px with a line height of 60px

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.

font 0.6em or 12 pixels, also with a line height of 60 pixels

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.

both fonts

Hope this explains things!

Alohci · Accepted Answer · 2014-02-05T10:23:53.493

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.

Yes, that explains things. It did take me a while to get a hold of how the math works, so I had to make some pictures to make it clearer. See my own answer. — Mr Lister, Feb 05 '14 at 11:18
Yes, I started to make a diagram but ran out of time. In any case, you made a much better job of it than I was doing. I've up-voted your answer. — Alohci, Feb 05 '14 at 11:45

score 2 · Answer 3 · 2020-01-28T23:11:40.353

Since there are already two answers that explain well why the height is increased, to quickly fix this problem you simply need to remove the units in line-height.

.lorem, .ipsum, .dolor, .sit {
    line-height:3; border:1px solid green;
}

According to MDN

The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line boxes within the element. On non-replaced inline elements, it specifies the height that is used to calculate line box height.

Values
normal Depends on the user agent. Desktop browsers (including Firefox) use a default value of roughly 1.2, depending on the element's font-family.

number (unitless) The used value is this unitless number multiplied by the element's own font size. The computed value is the same as the specified number. In most cases, this is the preferred way to set line-height and avoid unexpected results due to inheritance.

length The specified length is used in the calculation of the line box height. Values given in em units may produce unexpected results.

percentage Relative to the font size of the element itself. The computed value is this percentage multiplied by the element's computed font size. Percentage values may produce unexpected results.

So basically your question is one of the cases of unexpected results due to inheritance.

.container {
    display:inline-block;
}
.lorem, .ipsum, .dolor, .sit {
    line-height:3; border:1px solid green;
}
.ipsum:before {
    content:'world!';
}
.sit:before {
    font-size:.6rem;
    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>

I would hightlight this part *this is the preferred way to set line-height and avoid unexpected results due to inheritance.* --> the inheritance is causing the issue like explained in the answer of Mr Lister — Temani Afif, Jan 28 '20 at 22:56

score -2 · Answer 4 · answered Feb 05 '14 at 06:43

-2

Hi please add a specific height on your box...

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

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

answered Feb 05 '14 at 06:43

Krish

1,884
2
16
40

Could you elaborate on your answer and explain why this works? – thomaux Feb 05 '14 at 06:46
Because the box height working as a fluid layout without giving a specific value,so you give more/less font-size then the box height will change. – Krish Feb 05 '14 at 06:56
Yes, but wouldn't you expect the height of the box to decrease when decreasing the font size? – thomaux Feb 05 '14 at 07:06
This works because, although the height of the `before` box is still larger, the parent box is now fixed, and the before box overflows out of it. Not the best solution. And it doesn't explain the why. – Mr Lister Feb 05 '14 at 07:50

score -2 · Answer 5 · answered Feb 05 '14 at 06:48

-2

The font property on .sit:before is affecting this, the content property of css follows the current elements' css properties very stricly,

Its because of this that you can be able to manipulate the value of the content property within the same style that the content property is created

e.g

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

this would emphasize the color to be red.

answered Feb 05 '14 at 06:48

Wandile

174
1
16

This does not answer the OP's question – thomaux Feb 05 '14 at 07:07

Why would the height increase with a smaller font size?

5 Answers5

Linked

Related