澄清CSS字体大小的测量结果

Question

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

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

span { font-size: 10px; }

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

我想我有点混淆为什么它被称为“盒子”而不仅仅是em高度，如果它只是测量垂直距离。

Answer 1

阅读W3C规范的Font size: the 'font-size' property ..

  

字体大小对应于em   广场，用于排版的概念。

Answer 2

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

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