Reply To: dimension

[paulob]

To expand on what was correctly said above:

Unitless line-height (line-height:1.2) differs from line-height with units (line-height:1.2em etc) in that it is the “scaling factor of 1.2” that is passed down to children so a child will get 1.2 times the line-height of its own font-size.

On the other hand a line-height with a unit is converted by the browser into a fixed pixel value and it is this pixel-value that gets handed down to the child even if the child has a smaller line-height (unless you re-define line-height for the child of course).

As an example a parent with a font-size of 20px will get a line-height of 24px if line-height:1.2 was used. The same holds true if the parent was given a line-height of 1.2em. Both would get a line-height of 24px.

However, if a child of those parents has a font-size: of 10px then the line-height will be 12px and 24px respectively. 12px where the parent has a unit-less line-height and 24px where the parent’s line-height was stated with a unit.

It can therefore be seen that the difference can be considerable.

Unit-less line-heights can lead to layouts that perform better as the relationship is maintained with the font-size of the children.