Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Drawbacks to line-height without unit?

Are there any drawbacks(browser/device inconsistency...) in specifing line height without unit?

Example:

body {

    line-height: 1.5;
}
like image 434
zigzag Avatar asked May 26 '12 10:05

zigzag


People also ask

Why do we use Unitless line height?

Unitless line heights are recommended due to the fact that child elements will inherit the raw number value, rather than the computed value.

Why do we need line height?

#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.

What unit is used for line height?

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.

Can line height be less than font size?

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.


1 Answers

In most cases, it's actually better to use unitless line-height - see

  • http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
  • https://developer.mozilla.org/en/CSS/line-height - see the notes where they show an example

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.

like image 139
Ana Avatar answered Oct 13 '22 00:10

Ana