The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Line-Height

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #151688
    line-height: 1.2

    Is it right? what does 1.2 mean?


    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.


    Thanks a lot

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.