Line height default value if font size is 100%
normal, so use:
FYI, you can confirm this if you have Chrome by opening up a website, inspecting the
<body> element and viewing the inherited computed styles.
is line-height:1 equivalent to 100%?
The real reason is that the way they work is different and it can be understood by having a look at the W3C Specs for line-height and inheritance. The below is what the spec for line-height says about the unitless value (
<number>) and the percentage value.
<number> - The used value of the property is this number multiplied by the element's font size. Negative values are illegal. The computed value is the same as the specified value.
<percentage> - The computed value of the property is this percentage multiplied by the element's computed font size. Negative values are illegal
As BoltClock points out in his comment (correctly, as usual), inheritance always works the same way and it is always the computed value that gets inherited. The confusion with wordings was because I was referring to an older version of the spec whereas the new one is very clear and is using the right words.
When unitless value (number) is specified, the specified value for
line-height is the number which is also the computed value. So,
h1 (child) inherits the number which is 1 but it still needs to resolve this number into an actual
line-height that can be used. So, the used value is calculated based on specs by multiplying the inherited factor with the
h1 element's font-size (which is 2em = 32px) and sets
For the percentage, the computed value for
body is 100% of body's font-size (which is
16px) and so is equal to
16px. Now since this
16px is the computed value, the
h1 child inherits this value and uses it as-is because there is no need for further resolutions.
This is the reason why there is a difference between the two snippets as in one the line height for the
h1 is 16px and in another it is 32px.
If we set the
line-height: 100% directly at
h1 then we can see that the outputs match because now the
h1 calculates its own line-height as 100% of 2em (or 32px) which is same as 1 * its font-size.
Hello <br> world
line-height as a percentage not working
line-height: 100% means 100% of the font size for that element, not 100% of its height. In fact, the line height is always relative to the font size, not the height, unless its value uses a unit of absolute length (
What is the CSS height of a line of text? It doesn’t seem to be 1em
The exact calculation of heights of lines is complicated (see CSS 2.1 section 10 Visual formatting model details), but in a simple case like this, the height is determined by the
line-height value when the element is not empty. When it is empty, the height would be empty, but the
min-height setting forces the height to the font size (
The initial value of
line-height is browser-dependent, and it is expected to depend on the font, too. The default is in practice always larger than the font size. This explains what happens here.
To keep the height constant, it is best to explicitly set its
line-height and to set
min-height to the same value, e.g.
em unit means the size of the font, which is by definition the height of the font. This is a reference quantity and does not normally correspond to the height (or width) of any letter; the height of most letters is smaller than the font size (though this varies by letter and by font).
Absolute Positioning and Its Parent Element
Css/Webkit: Background Images for Table Row
How to Style a Gtklabel with CSS
CSS Equivalent to Photoshop's Justify-All
Best Way to Structure a CSS Stylesheet
::Before/::After + Flexbox in Mdn
Best Practices - Only Download CSS You Need, or Use a Minification Process
Bootstrap 3 Nav-Bar Change Color Cause Showing a White Border or White Line
Iframe Horizontal Scrolling Not Rendering on iOS
Chrome Columns Bug When Number of Columns Is Less Then Column-Count
CSS 3 or Svg Wave in a Background
Angular Material Mat-Spinner Custom Color
How to Shift a Background Image with CSS
Min/Max Width/Height with Multiple Values
Antialiased Text in Firefox After CSS Rotation