Chrome中图片上下留白主因是img默认inline导致基线对齐预留descender空间；查Computed中display、vertical-align、line-height可定位，设vertical-align: middle或bottom、font-size: 0、display: block等可解决。
Chrome里图片上下留白怎么一眼看出原因
图片在Chrome里莫名其妙多出空白，八成不是图片本身问题，而是<img alt="HTML图片怎么在Chrome中调试对齐_Chrome开发者工具调图片对齐技巧" >默认是inline元素，会和行内基线对齐，底部自动留出空间——这个空隙甚至不是margin或padding，而是字体下行区域（descender）预留位。
- 用Chrome开发者工具选中图片，看右侧面板的“Computed”页，重点查
display、vertical-align、line-height - 把鼠标悬停在元素上时，按住
Ctrl（Windows）或Cmd（Mac），能高亮显示真实占用的盒模型，包括那块“看不见的空白” - 如果父容器
font-size: 0，空白立刻消失——这是快速验证是否为基线对齐问题的土办法
img vertical-align设成什么值最稳
vertical-align是解决图片对齐最直接的属性，但乱设反而更糟。它只对inline或table-cell元素生效，而<img alt="HTML图片怎么在Chrome中调试对齐_Chrome开发者工具调图片对齐技巧" >默认就是inline。
- 日常布局首选
vertical-align: middle，它对齐的是父元素x-height中心，视觉上最“居中” - 想彻底消灭底部空白，用
vertical-align: bottom或vertical-align: top都行，但bottom更符合直觉（贴底） - 千万别设
vertical-align: baseline（这是默认值），除非你真需要文字和图片基线对齐 - 注意：如果父元素
line-height极大，middle也会被拉高，这时改用display: block更干脆
display: block能不能一劳永逸
能，但得清楚代价。把<img alt="HTML图片怎么在Chrome中调试对齐_Chrome开发者工具调图片对齐技巧" >设成display: block确实干掉所有行内对齐干扰，但它会失去和文字并排的能力。
- 适合场景：
<img alt="HTML图片怎么在Chrome中调试对齐_Chrome开发者工具调图片对齐技巧" >独立占一行，比如头像、banner、卡片图 - 不适合场景：图文混排、按钮里的图标、
<span></span>内嵌小图 - 副作用：一旦设了
block，vertical-align就失效了，别再白调 - 如果只是想居中，
display: block+margin: 0 auto比折腾text-align: center更可控
flex布局下图片为啥还偏移
Flex容器里<img alt="HTML图片怎么在Chrome中调试对齐_Chrome开发者工具调图片对齐技巧" >默认还是inline，但align-items通常能兜住。偏移往往来自没关掉图片的默认行为。
立即学习“前端免费学习笔记（深入）”；
- 确保父容器有
display: flex且设置了align-items: center（或flex-start等） - 子
<img alt="HTML图片怎么在Chrome中调试对齐_Chrome开发者工具调图片对齐技巧" >仍可能因vertical-align残留影响，建议显式写vertical-align: top或直接display: block - 如果图片外层套了
<a></a>或<span></span>，检查这些包裹元素有没有line-height或font-size干扰 - Chrome 115+ 对
img在flex中的min-width处理更严格，若图片被压缩变形，加min-width: 0可解
真正麻烦的不是调不对，而是调完发现父级font-size或line-height一改，所有vertical-align又偏了——这种连锁反应，在嵌套较深的组件里特别容易漏掉。
