为什么当行高变成0的时候，文字会落在上边框一半位置？

Question

.dib-baseline {
  display: inline-block; width: 150px; height: 150px;
  border: 1px solid #cad5eb; background-color: #f0f3f9;
  line-height:0px;
}
<span class="dib-baseline"></span>
<span class="dib-baseline">x-baseline</span>

为什么当行高变成0的时候，文字会落在上边框一半位置？

Answer 1

首先要清楚，line-height 默认值不是 0 ，是 normal,所以如果有两行，默认的 line-height 实际下图两张红线的距离：

这个不好测试，这里，我们设置

font-size:16px;
line-height:18px; 

方便测试讲解；

通常 line-height 大于 font-size，这样，就会在字体上方和下方加上半个行间距，在这里，行间距就是 2px,字体的上方和下方各有 1px,通常 line-height 通过影响行间距来影响视觉效果；

这里就是第一行的下半间距+第二行的上半间距，形成了行间距 2px; 如果把 line-height 改为 16px，两行就正好连在一起，如图：

行间距=(line-height) - (font-size)

放到这个公式里，

line-height:0;
font-size:16px

结果就是 行间距 = -16px;所以字体上下半行间距等于-8px,所以字体往上移 8px(相比之前上半间距1px就上移9px ), 这也就是题主问的：

为什么当行高变成0的时候，文字会落在上边框一半位置？

另外，由于字体上下半行间距等于-8px，上下一起移的结果就是，所有的文字在同一行，出现覆盖；

参考文档：CSS权威指南-中-第3版-扫描版.pdf

Answer 2

行高有一个特性，叫做垂直居中性。line-height的最终表现是通过line boxes实现的，而无论line boxes所占据的高度是多少（无论比文字大还是比文字小），其占据的空间都是与文字内容公用水平中垂线的。

来自http://www.zhangxinxu.com/wor...

Answer 3

楼上答的很清楚，我没什么好补充的，为楼上点赞。

Answer 4

一楼关于行高和字体大小间关系说的很有条理，点个赞