CSS EM 表示行高
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15132671/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
EM's for line-height
提问by Caspert
I would like to convert my new website from pixels to ems. My question is, should I also apply ems to my text line-height property?
我想将我的新网站从像素转换为 em。我的问题是，我是否也应该将 em 应用于我的文本行高属性？
回答by Jukka K. Korpela
Assuming that “converting to ems” means using the emunit for font-size, then you should set line-heightin a manner that also adapts to the font size. The two properties are closely related, and if you set one of them in emand the other (e.g.) in pxor pt, then the page will break if the font size is changed. So it would work against the very idea of “using ems” to use essentially different units for essentially connected properties.
假设“转换为ems”意味着使用em单位为font-size，那么您应该line-height以适应字体大小的方式进行设置。这两个属性密切相关，如果您将其中一个设置在em，另一个（例如）设置在pxor 中pt，那么如果更改字体大小，页面将中断。因此，它会违背“使用 em”为本质上连接的属性使用本质上不同的单位的想法。
For example, if you set font-size: 1.5emand line-height: 18px, then things will depend on the font size of the element's parent and may go very wrong if that size is much smaller or much larger than expected.
例如，如果您设置font-size: 1.5emand line-height: 18px，那么事情将取决于元素父元素的字体大小，如果该大小比预期小得多或大得多，则可能会出错。
Whether you use the emunit or a pure number is a different issue. Using just a number, as in line-height: 1.2, is primarily equivalent to using the emunit, as in line-height: 1.2em. But there is the difference that when line-heightis inherited, it is the pure number that gets inherited, not the computed value.
使用em单位还是纯数字是一个不同的问题。仅使用一个数字，如line-height: 1.2，主要等同于使用em单位，如line-height: 1.2em。但有一个区别，什么时候line-height被继承，被继承的是纯数，而不是计算值。
For example, if an inner element has twice the font size of its parent, then the inherited value 1.2means that 1.2 times its own font size is used, which is OK. But if the parent had line-height: 1.2em, then the child would inherit a value that 1.2 times the parent's font size – which is much smaller than its own font size.
例如，如果一个内部元素的字体大小是其父元素的两倍，那么继承的值1.2意味着使用其自身字体大小的 1.2 倍，这是可以的。但是如果父级有line-height: 1.2em，那么子级将继承父级字体大小的 1.2 倍的值——这远小于它自己的字体大小。
for more explanation end examples see line-height @ Mozilla Developer Network
有关更多解释结束示例，请参阅line-height @ Mozilla Developer Network
回答by Mark
line-heightcan be set in px, em's, every unit will fit.
line-height可以在px,中设置em，每个单元都适合。
line-heightworks best and future proof if you use a factor/multiplier, meaning no unit, but only a number that is multiplying your font-size.
line-height如果您使用因子/乘数，则效果最佳且面向未来，这意味着没有单位，而只有一个与字体大小相乘的数字。
.foo {
font-size: 1.3em; /* based that 1em == 10px */
line-height: 1.3; /* 16.9px line-height */
}
So, Yes, you can, to answer you question: no you should not.
所以，是的，你可以回答你的问题：不，你不应该。
just go for the factor based line-height to be future proof.
只需将基于因素的行高作为未来证明即可。
回答by Fabien Snauwaert
It is recommended to use the unitless number for line-height (to prevent inheritance issues). The computed line-height will then be the product of the unitless value multiplied by the element's font size.
建议对 line-height 使用无单位数（以防止继承问题）。计算出的行高将是无单位值乘以元素的字体大小的乘积。
It may be more convenient to use the fontCSS shortcut, like so (example taken from the Mozilla CSS docs):
使用fontCSS 快捷方式可能更方便，如下所示（示例取自 Mozilla CSS 文档）：
div { font: 10pt/1.2 Georgia,"Bitstream Charter",serif }
A good example of why the unitless value is preferable is given here: Prefer unitless numbers for line-height values.
这里给出了为什么无单位值更可取的一个很好的例子：Preferless numbers for line-height values。
回答by Pawan Lakhara
you can try line-height:1.3 !important;
你可以试试 line-height:1.3 !important;
