Chrome中图片上下留白主因是img默认inline导致基线对齐预留descender空间；查Computed中display、vertical-align、line-height可定位，设vertical-align: middle或bottom、font-size: 0、display: block等可解决。

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元素生效，而默认就是inline。

• 日常布局首选vertical-align: middle，它对齐的是父元素x-height中心，视觉上最“居中”
• 想彻底消灭底部空白，用vertical-align: bottom或vertical-align: top都行，但bottom更符合直觉（贴底）
• 千万别设vertical-align: baseline（这是默认值），除非你真需要文字和图片基线对齐
• 注意：如果父元素line-height极大，middle也会被拉高，这时改用display: block更干脆

display: block能不能一劳永逸

能，但得清楚代价。把设成display: block确实干掉所有行内对齐干扰，但它会失去和文字并排的能力。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 适合场景：独立占一行，比如头像、banner、卡片图
• 不适合场景：图文混排、按钮里的图标、内嵌小图
• 副作用：一旦设了block，vertical-align就失效了，别再白调
• 如果只是想居中，display: block + margin: 0 auto比折腾text-align: center更可控

flex布局下图片为啥还偏移

Flex容器里默认还是inline，但align-items通常能兜住。偏移往往来自没关掉图片的默认行为。

• 确保父容器有display: flex且设置了align-items: center（或flex-start等）
• 子仍可能因vertical-align残留影响，建议显式写vertical-align: top或直接display: block
• 如果图片外层套了或，检查这些包裹元素有没有line-height或font-size干扰
• Chrome 115+ 对img在flex中的min-width处理更严格，若图片被压缩变形，加min-width: 0可解

真正麻烦的不是调不对，而是调完发现父级font-size或line-height一改，所有vertical-align又偏了——这种连锁反应，在嵌套较深的组件里特别容易漏掉。

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