没有单位的行高的缺点? [英] Drawbacks to line-height without unit?
问题描述
在没有单位的指定线高度中是否有任何缺点(浏览器/设备不一致...)?
示例:
body {
line-height:1.5;
}
更好地使用无单位行高 - 请参阅
- http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
- https://developer.mozilla.org/en/CSS/line-height - 请参阅备注
当然,也有例外。第一个想到的是当你有一个已知 height
的块元素,并且其中一行文本,并且想要垂直居中这行文本 - 我发现最简单的方法是使用 line-height
等于 height
。
对于不知道与无单位 line-height
有什么交易的人。]
你有一个 font-size:14px
的元素。它设置在哪里,无论是继承与否,如果你自己设置它或它来自用户代理样式表无关紧要。
现在,如果设置,让我们说 line-height:1.5
,则会将其转换为 1.5 * 14px = 21px 的像素。所以你计算的 line-height
将会是 21px
。
Are there any drawbacks(browser/device inconsistency...) in specifing line height without unit?
Example:
body {
line-height: 1.5;
}
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
.
这篇关于没有单位的行高的缺点?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!