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

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

    
Hello


    




    
Hello