EM的行高如何计算？

Question

我希望将我的新网站从像素转换为ems。我的问题是，我是否也应该将ems应用于我的文本行高属性？

- Caspert

---

可以的。在CSS的line-height属性中，em是一个有效的单位。 - Raptor

接受的回答指出了为什么不应该在line-height属性中使用任何单位：因为这样计算出的line-height值只会被计算一次并继承下去。如果要让line-height随着字体大小调整，请删除单位。 - korkman

Answer 1

假设“转换为ems”意味着使用em单位设置font-size，那么您应该以一种适应字体大小的方式设置line-height。这两个属性密切相关，如果您将它们中的一个以em为单位设置，而将另一个（例如）以px或pt为单位设置，则如果更改了字体大小，页面将会破裂。因此，对于基本上相互关联的属性使用基本上不同的单位将违背“使用em”的想法。

例如，如果您设置font-size：1.5em和line-height: 18px，则结果将取决于元素父级的字体大小，并且如果该大小与预期的大小差别很大，可能会出现非常错误的情况。

无论您使用em单位还是纯数字，这是一个不同的问题。仅使用数字，如line-height: 1.2，主要等同于使用em单位，如line-height: 1.2em。但有一个区别，当line-height被继承时，继承的是纯数字而不是计算出的值。

例如，如果内部元素的字体大小是其父元素的两倍，则继承的值1.2表示使用其自身字体大小的1.2倍，这是可以的。但如果父元素具有line-height: 1.2em，则子元素将继承一个比其自身字体大小小得多的值，该值为父级字体大小的1.2倍。

有关更多解释和示例，请参见line-height @ Mozilla Developer Network。

- Jukka K. Korpela

---

感谢对 line-height: 1.5em 和 line-height: 1.5 的区别进行解释，这让我省去了大量的搜索时间！ - Renfei Song

Answer 2

line-height 可以设置为px，em等单位，每个单位都可以适应。

如果您使用因子/乘数，即仅使用数字来乘以字体大小，则line-height 最好且具有未来性。

.foo {
  font-size: 1.3em; /* based that 1em == 10px */
  line-height: 1.3; /* 16.9px line-height */
}

所以，是的，你可以回答你的问题：不，你不应该。

只需采用基于因素的行高，以确保未来兼容。

- Mark

---

如果我使用 ems 作为字体大小的单位，是否建议将行高转换为 ems？ - Caspert

Answer 3

建议使用无单位的数字来设置行高（以避免继承问题）。计算后的行高将是无单位数值乘以元素字体大小的结果。

使用 font CSS 快捷方式可能更加方便，例如以下示例摘自 Mozilla CSS 文档：

div { font: 10pt/1.2  Georgia,"Bitstream Charter",serif }

这里给出了一个很好的例子，说明为什么无单位值更可取：优先使用无单位数字作为行高值。

- Fabien Snauwaert

---

非常好的技巧和 MDN 资源！我一直对 line-height 属性和 em 的复杂性感到困惑。通过那个链接和关于 ems 的背景，我变得更加聪明了。 - oligofren