图片底部留白源于img默认inline且vertical-align:baseline，为字母g/j/y的descender预留空间；解决首选vertical-align:bottom（贴行框底边）或display:block（彻底脱离行内流）。
图片底部留白不是 margin 没设，而是它根本没在“你认为的位置”上——vertical-align: baseline 在偷偷占位。
为什么 margin-bottom 对图片底部无效
浏览器把 <img> 当作 inline 元素，默认按文字基线（baseline）对齐。这个基线以下还预留了 descender 空间（给字母 g、j、y 下延用），所以图片底边和父容器底边之间那条缝，根本不是 margin，是 line box 的固有高度。
- 你在开发者工具里看到
margin-bottom: 0已生效，但空白还在 —— 因为它不推挤行框边界 -
padding-bottom加在<img>上也无效：padding 是内容区内部留白，而问题出在外部定位 - 父容器加
border后，这条缝会更明显，hover 时高亮区域也不包含那块空白
用 vertical-align: bottom 快速对齐底部
这是保留图文混排能力的前提下，最轻量的解法。它让图片底边直接贴住行框（line box）底部，绕过基线计算。
- 必须作用于
<img>自身，且仅对display: inline或inline-block有效 -
vertical-align: bottom比middle更稳：后者对齐的是整行高度中点，受line-height影响大，缩放时易偏移 - 别写成全局规则：
img { vertical-align: bottom; }可能破坏已有图文布局；优先加类名，例如.footer-logo { vertical-align: bottom; } - 若父容器有
line-height: 1.5，建议同步设为line-height: 1或0，否则空隙可能残留
用 display: block 彻底脱离行内流
当图片是独立展示（如 banner、头图、卡片主图），直接切为块级元素是最干净的方案——vertical-align 失效，margin-bottom 立刻四边可控。
- 副作用是它会独占一行，无法和相邻文字水平并排；若需居中，得额外加
margin: 0 auto - 如果父容器用了
text-align: center，设display: block后该声明就失效了 - Flex 容器中慎用：一旦父容器是
display: flex，vertical-align本就不生效，此时display: block反而可能干扰align-items行为 - 响应式场景下更可靠：不受字体、字号、
line-height变化影响，兼容性覆盖所有现代浏览器
Flex 布局中图片底部对齐怎么写才不翻车
在 display: flex 容器里，vertical-align 完全无效。想让图片沉到底部，必须用 flex 自身的对齐逻辑。
- 父容器加
display: flex; align-items: flex-end;，图片自动贴底 - 若容器高度未显式设定（比如只靠内容撑开），
flex-end可能无效果——建议加min-height或固定height - 不要在
<img>上写margin-bottom：它会被gap或justify-content覆盖，且容易和align-items冲突 - 若需图片和文字左右分布+共同贴底，用
justify-content: space-between; align-items: flex-end;
真正难的不是“加多少像素留白”，而是意识到：图片底部那条缝，从来不是样式没写对，而是你还没告诉浏览器——它到底该待在哪儿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
