为何无内外边距、行高为1的span内字符存在神秘垂直间距？

问题描述 #

当span元素设置无margin、padding，line-height为1，内部仅包含单个字符时，垂直间距从何而来？此处的"X"字符为何未与边框贴合？

代码示例 #

.test1 {
  box-sizing: border-box;
  border: 2px solid red;
  display: inline-flex;
  font-family: arial;
  font-size: 22px;
  line-height: 1;
  margin: 0;
  padding: 0;
}

<span class="test1">X</span>

核心原因 #

垂直间距来自字体本身的设计度量，结合line-height的计算逻辑共同导致：

• font-size定义的是字体「em框」的高度，但绝大多数字体（比如Arial）里，字符的实际视觉高度并不会填满整个em框。以X为例，它的高度大概只有font-size的70%左右，剩下的空间是字体设计时预留的上下留白。
• line-height:1意味着行框（line box）的高度等于font-size，但行框高度是基于字体内置的上升高度（ascent）、下降高度（descent）、行间距（line gap）计算的，字符在这个行框内默认以基线对齐，自然会上下留出空隙。
• 当span设置为inline-flex时，容器高度默认由内部行框高度决定（即22px），而X字符无法填满这个高度，因此不会和边框贴合。

解决办法 #

如果想要让字符和边框完全贴合，可以通过调整字体度量属性实现：

.test1 {
  box-sizing: border-box;
  border: 2px solid red;
  display: inline-flex;
  font-family: arial;
  font-size: 22px;
  line-height: 1;
  margin: 0;
  padding: 0;
  /* 强制字体上升高度占满em框，下降高度设为0 */
  font-ascent-override: 100%;
  font-descent-override: 0%;
}

该方法通过覆盖字体的内置度量，让字符完全填满em框，从而消除上下留白。注意此属性需要现代浏览器支持。

内容的提问来源于stack exchange，提问作者jbyrd