当line-box的line-height为0，span有一个更大的font-size,line-box会有一个高度

Question

1. 当line-box的line-height为0，span有一个更大的font-size,line-box会有一个高度，这个高度是怎么产生的？而且这个数值很奇怪

.no-height{
  border: 1px solid #f00;
  line-height: 0;
}
.bigger{
  font-size: 180px;
}

附上demo地址：https://codepen.io/clear_june...

Answer 1

试了半个小时,没找到原因.强迫症都给我搞出来了

Answer 2

vertical-align 不为 baseline 就行了

Answer 3

line-height。高度的表现不是行高，而是内容区域和行间距。

Answer 4

从知乎看到你的问题过来的，所以我就默认你知道有关这个问题的一些基础知识了。
正文：
为了不被margin和padding影响，我私自加了一个* {margin: 0; padding:0;}
然后的效果是这样的

我们知道，line box里面是有很多inline boxes的，而且line box的高度是inline boxes的最高点与最低点之间的距离。而在你给的这段代码里面，则有testx这个匿名inline box和asdfxo这个inline box。

对于匿名inline box，他的高度继承了其父元素的line-height=0，所以不妨看作这个匿名inline box被压缩到了testx的content area的垂直中点，变成了一条线段。后面的那个inline box也是一样。

由于font-family相同，而后面<span>元素的font-size更大，所以asdfxo的content area的高度更高，自然其对应的被压缩的inline box线段就处于更高的位置。所以这个line box就有了所谓的高度。而且这个高度=（asdfxo的content area的高度的一半 - asdfxo的baseline到其content area底部的距离 - testx的content area的高度的一半）

小白第一次回答问题，如果有讲的不清楚或者有讲错的地方还请私信我或者评论，告诉我修改回答。

Answer 5

1. 当 line-height 和 content area 高度一致时，他们的区域完全重合，当 line-height 设置为0，相当于其起止位置都在 content area 中心位置（inline 元素 content area 大小受字体和字号影响，不受行高影响）
2. 前后两者要基线对齐，但字号不同导致 content area 大小不一样，即同为 line-height: 0，但 line-height 起止位置不一样（都在 content area 中心）
3. line box 高度是全部子元素中的最高点到最低点，在这里就是两个 content area 中心的距离

Answer 6

我也遇到这个问题了
一直没想明白