vertical-align: bottom能立刻消除图片底部空白，因其让图片底边直接贴合行框底边，绕开baseline对齐及descender预留空间；它仅对inline/inline-block元素生效，且在flex/grid容器中被忽略。

vertical-align: bottom 为什么能立刻消除图片底部空白

因为 vertical-align: baseline 是 的默认值，而 baseline 对齐的是文字的基线（不是底线），浏览器会为潜在的 descender 字母（如 g、y）预留空间，这部分空隙就“挂”在图片下方。设为 bottom 后，图片底边直接贴到行框的底边，绕开了基线计算逻辑。

常见错误现象：vertical-align: baseline 下父容器加背景色时，图片底部明显漏出背景；用开发者工具选中图片，能看到 computed height 比实际图片尺寸大 3–5px。

• vertical-align: bottom 最稳妥，兼容所有现代浏览器，包括 IE8+
• 避免用 vertical-align: text-bottom —— 它对齐的是文字的底线（含 descender 空间），反而可能扩大缝隙
• 如果图片和文字混排，middle 更适合视觉居中，但需注意它对齐的是父元素 font-size 的 0.5ex，不是绝对居中

vertical-align 不生效？检查这三点

设置 vertical-align 却没反应，大概率是元素没处在「行内格式化上下文」中——这个属性只对 inline、inline-block、table-cell 元素起作用。

• 确认 没被设成 display: block 或 flex 子项（block 元素忽略 vertical-align）
• 父容器不能是 display: flex 或 grid —— 此时对齐由 align-items 控制，vertical-align 完全无效
• 如果用了 line-height: 0 或 font-size: 0 清除缝隙，vertical-align 仍会计算，但因行高塌陷，效果不可见，容易误判为“失效”

vertical-align: top / middle / bottom 选哪个

三者都能消除底部缝隙，但行为差异明显：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• top：图片顶边对齐行框顶边，适合顶部对齐场景，但若父容器有 line-height，图片下方可能仍有空（取决于内容高度）
• middle：对齐点在父元素 font-size 的 0.5ex 处（约字母 x 高度一半），常用于图文混排，但不同字体下位置浮动，不够精确
• bottom：图片底边紧贴行框底边，最直接、最可控，推荐作为默认选择

别依赖 text-top 或 text-bottom —— 它们依赖字体度量，跨字体/系统表现不一致，移动端尤其容易出偏移。

为什么有时 vertical-align 设了还是有缝

真正顽固的缝隙往往不是 vertical-align 的问题，而是叠加了其他干扰因素：

• HTML 中 标签前后存在换行或空格，被解析为文本节点，参与 IFC 布局 —— 这时即使设了 vertical-align: bottom，缝隙仍来自那个“幽灵空白字符”
• 父容器设置了 line-height 且值较大（如 line-height: 2），而 vertical-align 只调整元素在行框内的位置，并不改变行框本身高度
• 图片被包裹在 或 里，而这些元素本身有默认样式（如 的 text-decoration）间接影响基线

遇到这种情况，优先检查 HTML 结构是否紧凑（删掉 img 前后换行/空格），再看是否需要配合 font-size: 0 或 display: block 组合使用 —— vertical-align 很好用，但它不是万能胶。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！