- This topic is empty.
September 30, 2013 at 7:37 am #151688lreliaParticipant
Is it right? what does 1.2 mean?September 30, 2013 at 8:22 am #151693paulobParticipant
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.September 30, 2013 at 8:08 pm #151758lreliaParticipant
Thanks a lot
- The forum ‘CSS’ is closed to new topics and replies.