Drawbacks to line-height without unit?

2020-05-23 04:26发布

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

Example:

body {

    line-height: 1.5;
}

回答1:

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.