1. 前端排版原理的核心认知
在前端排版中，行高（line-height）不是某个元素的“高度值”，而是整行文本所在的行盒高度。文本的行高通常由字体设计的度量（如 ascent、descent、em 盒等）与 CSS 的 line-height 属性共同决定，因此文本可以“撑起”整行的高度。相对于文本而言，图片等内联替换元素的高度并不直接改变该行的行盒高度，这也是为什么你常见到文本可以显著变化行高，而图片的高度并不总是带来同样的视觉效果的原因之一。
理解这一点有助于我们正确设计图片与文本在行内的排版关系。内联元素和内联替换元素的行为差异决定了它们在行内布局中的高度和垂直对齐方式。本文后续将通过具体现象和示例，解释为什么 img 作为内联元素的高度不起作用，而文本却能撑起行高，以及如何通过样式调整达到期望的排版效果。
1.1 行高的定义与影响因素
行高是基于字体的基线到基线的距离，通常等同于字体大小乘以一个系数（如 1.5、1.2 等）或一个固定像素值。它决定了两行文本之间的垂直间距，以及文本在同一行内的“容纳高度”。在没有特殊处理时，文本的行高由 font-size、line-height 与字体本身的度量共同决定，它直接影响文本行的可读性与排版密度。
对文本而言，行高是可观测的高度，因为文本行会以其基线为参照线向上和向下延展，形成整行的可视高度。若你把字体放大，或显式设置更大的 line-height，文本行盒的高度就会随之增大，从而产生更宽的竖向间距。
1.2 图片作为 inline 元素的行为
图片属于内联替换元素（inline replaced element），它没有字体度量（no ascent/descent 等字形指标）。当图片作为 inline 内容出现在文本中时，浏览器会以图片的 intrinsic height 来占据相应的垂直空间，并且默认沿着文本的基线对齐。由于缺少与字体相关的度量，图片的高度不会像文本那样“主动”撑起该行的行高，因此在许多场景中，简单地增大图片高度并不会改变整行的行高显示。
此外，垂直对齐方式（vertical-align: baseline，middle，top 等）也会影响图片在行内的位置和与文本的相对关系。底线对齐（baseline）会在图片底部留出一定空隙来贴合字体的基线和 descender 区域，从而让图片看起来并没有直接提升文本的行高。这就是“为什么 img 高度不起作用”的一个直观原因：图片的高度习惯性地被视作替换内容的尺寸，对行盒高度的影响被基线对齐与字体度量共同决定。
/* 示例：在同一段落内放置文本和图片，观察行高变化 */
p { line-height: 1.8; font-size: 16px; }
p img { height: 40px; vertical-align: baseline; }
2. 为什么 img 高度不直接改变行高？原理剖析
在一个内联格式化上下文（IFC）中，文本的行高来自字体的度量，而图片等内联替换元素的高度来自 CSS 设置的 height 属性或其原始尺寸。由于二者缺乏相同的度量基础，图片高度不会像文本字号那样“主动”拉升行高，导致在某些情况下看起来“高度没有作用”。
基线（baseline）与行盒高度的关系，是关键的决定因素。文本的基线决定了两行之间的距离，而 img 只是在基线附近进行对齐。若 img 高度与当前行高相比并不超过行盒高度，则视觉上看不到行高的改变；若高度明显超过当前行高，浏览器可能会扩大整行的高度以容纳图片，但这通常需要在意多种因素共同作用下才会被显现出来。
2.1 基线、行盒与替换元素的交互
浏览器在渲染时会为每一行创建一个行盒（line box），其高度受 line-height 的约束，也会受该行内所有内联盒子（包括文本框、图片、其他内联元素）的高度影响。文本的像素高度与其字体度量密切相关，因此文本自带的高度往往直接决定了行盒的基本高度。
而图片作为替换元素没有字体度量，它的高度只与 height 属性及 intrinsic 图像尺寸相关。若图片高度超过行盒高度，部分内容会溢出或触发行盒的重新计算；若图片高度在行盒高度之内，行高的改变就不明显。
2.2 文本撑起行高的真实机制
文本撑起行高，源自于字体设计的“em 盒”与字形的上升线（ascent）与下落线（descent）。当你设置 line-height 为一个相对值（如 1.5、1.8）或一个具体像素值时，浏览器会将该数值应用于基线之间的距离。这使得文本在视觉上呈现更高的行间距，且对后续行的排版具有直接影响。
与之对照，若要让图片“参与”行高的扩展，通常需要额外的样式手段，例如将图片放在一个包含块中，或通过 vertical-align、display、line-height 的组合来实现目标效果。下方给出一个对比示例，帮助理解两者的差异。
/* 直接用 line-height 调整文本的行高，图片不受影响的示例 */
p { line-height: 1.8; font-size: 16px; }
p img { height: 40px; vertical-align: baseline; }/* 让图片也随行高提升（常见做法之一） */
p { line-height: 1.8; }
p .img-wrap { display: inline-block; height: 72px; vertical-align: bottom; }
p .img-wrap img { height: 72px; display: block; }
3. 如何在实际开发中实现可控的排版效果
面对“img 作为内联元素的高度不起作用，而文本却能撑起行高”的现象，开发者通常会采用以下策略来获得期望的垂直排版效果。核心是明确你要控制的是“行高”本身，还是“图片在行内的对齐与占据空间”。
3.1 使用 vertical-align 与 display 的组合
通过改变 vertical-align 属性，可以调整图片相对文本基线的位置，从而让图片与文本在视觉上更自然地融洽。常见做法包括把图片设为 inline-block，然后选择合适的 vertical-align 值，如 middle、text-bottom、baseline 等，以获得期望的对齐和行高感知。
另一个方向是把图片设置为 inline-block，并为其设置明确的高度，再通过父级行高控制整行的高度。这样，图片的视觉尺寸就更易于与文本的行高保持一致，避免无意的额外空隙或溢出。
/* 图片作为 inline-block，配合 vertical-align 调整对齐 */
p { line-height: 1.8; font-size: 16px; }
p img { display: inline-block; height: 40px; vertical-align: middle; }/* 或者让图片处于文本底部对齐，减少额外空隙 */
p img { vertical-align: bottom; height: 40px; }
3.2 实践中的注意点
在实际页面排版中，最重要的是明确目标：你是要统一整段文本的行高，还是要让图片以特定高度参与行高计算。常见的做法包括：
- 为容器设置合适的 line-height，确保文本行高一致；
- 对图片使用 display: inline-block，避免默认为 inline 元素导致的空隙与对齐问题；
- 结合 vertical-align 与 image 的高度，来实现你期望的视觉对齐效果；
- 如果需要让图片“拉高”整行高度，考虑把图片放在一个单独的块级容器内，或把图片和文本分开布局（如使用 flex 布局）来控制高度。
/* 示例：用 flex 容器实现统一行高，图片作为子项参与对齐 */
.parent { display: flex; align-items: center; line-height: 1.8; }
.parent img { height: 40px; }
.parent span { font-size: 16px; line-height: 1.8; }
总之，要解决“img 高度不改变行高”的现象，需要理解文本行高的本质以及图片作为替换元素的独立性，并通过合理的 CSS 组合来达到视觉上的统一与稳定的排版效果。通过上述方法，你可以在不牺牲文本可读性的前提下，灵活地控制图片与文本在同一行中的对齐与间距。
