CSS中inline-box设置line-height导致盒子高度异常问题

核心原因：块级元素行框布局与inline-block的基线对齐规则 #

当.box未设置height时，它的高度由内部行框高度决定，具体逻辑如下：

1. .box是块级元素，默认高度由内容撑开，且它设置了line-height: 120px，这个行高会作用于内部的行框布局。
2. 子元素.content是inline-block，默认垂直对齐方式为baseline（基线对齐），它的高度由自身内容决定：4行文本，每行line-height:20px，总高度为4*20px=80px。
3. 基线对齐规则下，.content的基线（即最后一行文本的基线）会与父级.box的行框基线对齐。父级行框的行高是120px，为了满足基线对齐，父级行框需要在.content的下方额外留出(120px - 20px)/2 = 50px的空间（这部分是父级行高减去子元素最后一行行高的半值）。
4. 最终.box的总高度为.content的高度加上下方额外空间：80px + 50px = 130px。

当给.box手动设置height:120px时，块级元素的高度被强制指定，会覆盖默认的行框高度计算逻辑，因此高度直接显示为120px。

验证与解决 #

如果想让.box在不设置height的情况下高度等于子元素高度，可以修改.content的垂直对齐方式，比如设置：

.content {
  display: inline-block;
  line-height: 20px;
  vertical-align: top; /* 或 middle/bottom */
}

此时.box的高度会自动适配为80px，符合子元素的实际高度。

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