本文详解 inline-block 元素因基线对齐（baseline alignment）在父容器底部产生意外空白的根本原因，并提供 vertical-align: bottom 等可靠解决方案，附可直接运行的代码示例与关键注意事项。
本文详解 inline-block 元素因基线对齐（baseline alignment）在父容器底部产生意外空白的根本原因，并提供 `vertical-align: bottom` 等可靠解决方案，附可直接运行的代码示例与关键注意事项。
在 CSS 布局中，当使用 display: inline-block 时，元素虽具备块级盒模型特性（如可设宽高、内边距），但仍遵循行内格式化上下文（IFC）的对齐规则——即默认按 baseline（基线）对齐。基线是为容纳字母如 g、j、y、q、p 的下伸部分（descender）而预留的垂直空间。因此，即使 <em> 内仅包裹一张图片，浏览器仍会在其下方保留这段“隐形空白”，导致 .header 容器底部出现不期望的间隙。
解决该问题的核心思路是：改变 inline-block 元素的垂直对齐方式，使其脱离基线对齐约束。最直接、兼容性最佳的方法是设置 vertical-align: bottom：
.header {
background-color: red;
}
.content {
background-color: blue;
}
em {
display: inline-block;
background-color: yellow;
vertical-align: bottom; /* ✅ 关键修复：对齐容器底边 */
}
img {
display: block; /* 防止 img 自身 baseline 空隙干扰（可选但推荐） */
}<div class="header">
<em>
<img src="https://placehold.co/60x60" alt="logo">
</em>
</div>
<div class="content">
Some content
</div>✅ 效果验证：应用后，<em> 将紧贴 .header 的底部边缘，空白间隙完全消失。
其他可行方案（按推荐度排序）
- vertical-align: top 或 vertical-align: middle：同样可消除 baseline 空隙，但需根据整体布局选择语义更合适的对齐位置；
- font-size: 0 on parent：将父容器（.header）字体大小设为 0，可消除基线相关空间，但需注意子元素需重置 font-size，维护成本略高；
- 移除 HTML 中的换行/空格：因 inline-block 元素间的空白符会被渲染为一个空格，若多个 inline-block 并列，需写成 <em>...</em><em>...</em> 连写形式（本例单个元素不适用，但属常见关联问题）。
注意事项
- vertical-align 仅对 inline、inline-block、table-cell 元素生效，对 block 或 flex 子项无效；
- 若父容器设置了 line-height，且值较大，也可能加剧空白高度——此时建议统一控制 line-height: 1 或 line-height: normal；
- 图片本身设为 display: block 是良好实践，可避免 <img> 作为 inline 元素时自带的 baseline 空隙叠加影响。
综上，vertical-align: bottom 是解决 inline-block 底部空白最简洁、语义清晰、跨浏览器稳定的首选方案。理解其背后的基线机制，能帮助你举一反三，高效应对各类行内布局“幽灵间隙”问题。
