在前端页面布局的过程中，我们经常会把文字、图片等内容放在内联元素容器里，比如<span>或者行内块元素中，此时会发现一个明显的差异：文字内容可以撑起容器的高度，而图片却无法产生同样的效果。这个现象背后涉及CSS行内布局的核心规则，需要从内联元素的盒模型、替换元素的特性等多个维度来解析。
内联元素的行内盒模型基础
内联元素在布局时会生成行内盒，每个行内盒的高度由内容区域和行间距共同决定。对于非替换的内联元素（比如包含文字的<span>），其内容区域的高度由字体本身的度量决定，而整个行内盒的高度则由line-height属性控制。
当我们没有手动设置line-height时，浏览器会使用字体的默认行高，此时文字的内容区域会和行高共同作用，撑起所在行的高度，进而撑起父容器的高度。我们可以通过下面的代码直观看到这个效果：
<style>
.text-box {
background: #f0f0f0;
border: 1px solid #ccc;
}
</style>
<div class="text-box">
<span>这是一段测试文字，用来观察内联元素的高度表现</span>
</div>
文字撑起高度的核心逻辑
文字属于非替换内联元素的内容，其行内盒的高度计算遵循以下规则：
- 内容区域高度由字体的em方盒决定，不同字体的默认内容区域高度可能有差异
- 行内盒的总高度 =
line-height的值，当line-height大于内容区域高度时，多出的部分会平均分配到内容区域的上下两侧，形成半行间距 - 父容器的高度由内部所有行盒的最高行内盒高度决定，因此文字的行内盒高度会直接撑起父容器
我们可以通过代码验证line-height对文字高度的影响：
.text-test {
font-size: 16px;
/* 设置行高为30px，此时行内盒高度为30px */
line-height: 30px;
background: #e8f4ff;
}
图片无法撑起高度的原因
图片属于替换元素，替换元素的内联盒模型和普通文字有本质区别。替换元素的内容不在CSS渲染控制范围内，其尺寸由元素自身的固有尺寸决定，默认情况下，图片的行内盒高度等于其固有高度，但是会受到vertical-align属性的影响。
默认情况下，vertical-align的值为baseline，也就是元素的基线和父元素的基线对齐。对于图片来说，其基线位于图片的底部边缘，而父元素的基线是由内部文字的基线决定的，这就导致图片底部会和父元素的基线对齐，此时父元素为了容纳基线下方的部分，会额外增加一段高度，而图片本身的固有高度并不会直接撑满父容器。
我们可以通过下面的代码看到图片的默认表现：
<style>
.img-box {
background: #f0f0f0;
border: 1px solid #ccc;
}
.img-box img {
width: 100px;
height: 50px;
}
</style>
<div class="img-box">
<img src="https://ipipp.com/test.jpg" alt="测试图片">
</div>
如何让图片也能撑起容器高度
要让图片像文字一样撑起容器的高度，只需要调整vertical-align的属性值即可。当把vertical-align设置为top或者bottom时，图片的对齐方式不再基于基线，此时父容器的高度就会由图片的高度直接决定。
修改后的代码如下：
.img-fix {
vertical-align: bottom;
/* 也可以设置为top，效果类似 */
}
常见误区说明
很多开发者会误以为图片无法撑起高度是因为没有设置display: block，实际上即使把图片设置为行内块元素，只要vertical-align还是默认值baseline，依然会出现父容器高度大于图片高度的情况。只有调整对齐方式，或者将父元素的line-height设置为0，才能消除基线带来的额外高度。
另外需要注意，line-height对替换元素本身的高度没有影响，它只会影响内联元素中行盒的高度计算，这也是图片和文字在高度表现上差异的重要原因之一。
内联元素line-heightvertical-align替换元素行内盒模型修改时间：2026-07-16 20:21:27