css - 阐明 CSS 字体大小究竟测量什么

Question

我正在阅读 Eric Meyer 撰写的 CSS 权威指南第 3 版。

他关于字体大小的部分(第 107 页)指出字体大小决定了 em 框。如果我这样做:

span { font-size: 10px; }

它是否将 em 框的水平和垂直设置为 10px？他将测量称为基线之间的距离。

我想我有点困惑，为什么它被称为“盒子”而不是 em 高度，如果它所做的只是测量垂直距离。

Answer 1

“em”可用作垂直或水平测量中的相对测量单位。

因此，如果当前字体大小设置为 12px，则在子元素上设置 margin:1em 会在其周围创建 12px 的边距。如果您随后将父元素的字体大小更改为 16px，边距也会增加到 16px。