浮动图片下方空隙由line-height撑出而非margin，是父容器在ifc中为基线对齐预留的descender空间；实操应先查computed中line-height值，再用display:block或vertical-align:bottom等方案针对性解决。
浮动图片下方空隙是 line-height 撑出来的，不是 margin
这个空隙根本不是图片自己的 margin-bottom，而是父容器在行内格式化上下文（IFC）中为基线对齐预留的 descender 空间。哪怕父容器里只有 float: left 的 img，只要它没脱离行内流，line-height 就会参与计算行框高度，底部自然多出 2–4px 缝隙。
实操建议：
- 用开发者工具选中父容器，在 Computed 面板里直接看
line-height最终值——如果大于 1（比如line-height: 2或line-height: 24px），基本就是它在撑高 - 临时加
line-height: 0到父容器上验证：空隙消失 → 确认是此问题；但别长期这么写，否则内部文字会叠在一起 - 若父容器含文字，优先调低
line-height至1.2～1.5区间，比硬设0更安全
display: block 是最稳的解法，但得看是否允许图文断流
img { display: block; float: left; } 能立刻干掉空隙，因为块级元素不参与 IFC 对齐，baseline 逻辑彻底失效。但它会强制换行，破坏图文混排。
适用场景：
- 轮播图、banner 图、卡片封面这类独占一行的图片 ✅
- 父容器是
flex或grid布局时，加了也生效，但其实没必要——这些布局天然不触发该空隙 ✅ -
<p></p>里插小图标、<span></span>内嵌图、按钮里带 icon ❌ 加了就文字被挤到下一行
vertical-align: bottom 更适合图文混排场景
当图片必须保持 inline 特性（比如和文字同行显示），vertical-align: bottom 是首选：它让图片底边直接贴住当前行框底边，绕过 baseline，空隙归零。
注意点：
- 只对
inline或inline-block元素生效；如果已设display: block，这行样式等于没写 - 别用
vertical-align: middle—— 单张图没参考系，位置飘，不同字体下表现不一致 - 若父容器
line-height过大（如line-height: 2），空隙会被放大；此时单调img不够，得同步控制父级line-height或设font-size: 0
清除浮动才是治本，别只盯着图片调样式
浮动元素脱离文档流，父容器无法感知其高度，这才是空隙“看起来在图片下面”的根本原因。光调 img 的 vertical-align 或 display，只是掩盖症状。
推荐做法：
- 给父容器加
.clearfix::after伪元素：简洁、无侵入、兼容性好 - 避免用
overflow: hidden—— 它可能意外裁剪阴影、下拉菜单、定位元素等溢出内容 - 别在 HTML 里塞
<div style="clear:both"></div>—— 污染语义，仅限临时调试
真正容易被忽略的是：空隙常不在图片上，而在父级盒模型里。先查 margin-bottom、padding-bottom、HTML 换行符、甚至图片导出时自带的透明底——这些都比 CSS 样式更常成为元凶。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
