Omit unit (use only <number>) when declaring line-height

unless you like solving inexplicable inheritance problems, or explicitly declaring line-height on every element

DIV {line-height: 1}; DIV DIV {font-size: 200%}

The quick brown fox
jumps over the crazy
The quick brown fox
jumps over the crazy

DIV {line-height: 1em}; DIV DIV {font-size: 200%}

The quick brown fox
jumps over the crazy
The quick brown fox
jumps over the crazy

DIV {line-height: 100%}; DIV DIV {font-size: 200%}

The quick brown fox
jumps over the crazy
The quick brown fox
jumps over the crazy

When rendered according to the css 2.1 spec, the 200% text in the second two DIV DIVs, those for which line-height of the parent are specified in em or %, will overlap, the child DIVs being 1/2 the height of their containing DIVs; while the first DIV DIV will be 2/3 the height of its containing DIV, and its text won't overlap. The overlapping text in the latter DIV DIVs is because the spec requires the calculated line-height declared in em or % be inherited by the children. In contrast, it is <number> itself that is inherited by the children, which allows the line-height declared to be applied in reference to the font-size of the child DIV instead of the ancestor.


Old IE versions have an additional problem with line-height.
Parent page
Valid HTML 4.01!
Last Modified
2017-02-11
© Felix Miata
Felix's Home