Are there any drawbacks(browser/device inconsistency...) in specifing line height without unit?
Example:
body {
line-height: 1.5;
}
Unitless line heights are recommended due to the fact that child elements will inherit the raw number value, rather than the computed value.
#Why line-height is important The purpose of the line-height is to define a readable line spacing for your text. Because readibility is dependent upon the size of the text, it is recommended to use a dynamic value that is relative to the size of the text.
Sets line height using a specific unit of measurement (such as em, px, and cm). If you specify 10px, your line height will be 10px. Sets line height to be equal to a multiple of the font size. If your font size is 10px, your line height will be 10px, 18px, and 20px, respectively.
If the value of the line-height property is smaller than the value of the font-size , text may overflow the element, and text on one line may overlap text on another line above or below it. It is often convenient to set the value of the line-height in the font shorthand property.
In most cases, it's actually better to use unitless line-height - see
Of course, there are exceptions. The first one that comes to mind is when you have a block element with a known height
and with one line of text in it and you want to center that line of text vertically - I find that the easiest way to do that is to use a line-height
that's equal to the height
of the block element.
[Just in case, for anybody who doesn't know what's the deal with unitless line-height
.]
Suppose you have an element with font-size: 14px
. It doesn't matter where it was set, whether it's inherited or not, if you set it yourself or it came from the user agent stylesheet. The element has font-size: 14px
.
Now, if you set, let's say line-height: 1.5
for the same element, this will be translated into pixels as 1.5 * 14px = 21px. So your computed line-height
will be 21px
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With