尽管使用font-size == line-height，为什么有些字符会溢出一行？

Question

＆＃13;

＆＃13;

<div style="height:40px; line-height:40px; width:40px; font-size: 40px; font-family: sans-serif; background-color:rgb(220,220,220)">
  ⇪
<div>

＆＃13;

＆＃13;

＆＃13;

在Chrome上运行该代码段，macOS Sierra，显示：

注意箭头溢出了div。我以为这永远不会发生。为什么呢？

Answer 1

因为font-size没有定义字形的高度，而是定义了em-square的高度。字形的常态是字形高于em-square。

每种字体都有一个em-square大小，一个上升和下降。字形通常适合从上升顶部到下降底部的距离，但该距离通常大于em-square尺寸。