Use only <number> for line-height

unless you like solving inexplicable inheritance problems or setting an explicit 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 specified 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 specified to be applied in reference to the font-size of the child div instead of the ancestor.


IE has an additional problem with line-height.
Valid HTML 4.01!
Last Modified
2005.11.29
© Felix Miata
Felix's Home