line-height是否适用于img标签？inline元素布局疑问解析

问题场景 #

HTML代码：

<div class="text-height">
  abcdefghijklmnopqrstuvwxyz
  <img src="...." />
</div>

CSS代码：

.text-height{
  color: white;
  font-size: 20pt;
  line-height: 0;
}

img{

}

已知将 img 设置为 display:block 可消除容器的下行间隙，但存在以下疑问：

• line-height 无法消除 img 作为 inline 元素的默认下行空间，却能消除文本的？
• line-height 是否适用于 img 标签？若适用，为何无法清除其默认间隙；若不适用，是否仅作用于文本？

结合实验现象：

1. 仅保留文本时，line-height:0 让容器高度为0；
2. 加入默认高度的 img 后，容器高度被撑开，文本仍不占高度；
3. 给 img 设置 height:0，容器仍保留部分高度；
4. img 设为 display:block 后，间隙消失；
5. 容器 line-height:10 时，间隙问题似乎得到改善。

核心解析 #

1. 为什么 line-height:0 清不掉 img 的下行空间？ #

问题核心是inline 元素的默认垂直对齐规则，而非 line-height 的作用范围：
所有 inline 元素（包括 img）默认 vertical-align: baseline（基线对齐）。基线是文本中普通字母（如x）的底部位置，而字体设计中，基线下方会预留容纳下伸字母（y、g、q）的空间（称为 descender 区域）。

• 仅文本时：line-height:0 把行框高度压缩到0，文本溢出容器，但容器高度由行框决定，所以显示为0；
• 加入 img 后：img 对齐基线，即使 line-height 为0，基线下方的 descender 预留空间依然存在，行框高度被这个空间撑开，导致容器出现高度；
• img 设为 height:0 后：它仍是 inline 元素，依然遵循基线对齐规则，descender 空间还是会让行框保留高度，容器不会完全塌陷。

2. line-height 是否适用于 img？ #

line-height 会被 img 继承，但不会直接影响 img 自身的尺寸——img 的尺寸由 width/height 属性或图片本身的分辨率决定。不过它会影响包含 img 的行框高度：

• 当 line-height > img 高度：行框高度由 line-height 决定，img 在其中按 vertical-align 规则对齐；
• 当 line-height < img 高度：行框高度被 img 高度撑开。

你设置 line-height:10 时看起来“生效”，是因为此时行框高度足够覆盖基线下方的预留空间，视觉上抵消了间隙，但本质还是 vertical-align 在起作用，并非 line-height 直接消除了 img 的默认间隙。

3. 为什么 display:block 能解决问题？ #

把 img 设为 block 元素后，它脱离了 inline 布局流，不再参与行框的基线对齐逻辑。此时容器高度完全由内部 block 元素的高度决定，不存在 inline 布局中基线下方的预留空间，所以间隙彻底消失。

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