inline-block图片间空白源于html换行/空格被解析为文本节点，产生2–4px间隙；可通过父容器font-size:0+子元素重置字体、vertical-align修复基线空白，或直接改用flex布局彻底规避。
inline-block 图片间有空白，不是 margin 是 HTML 文本节点
图片设了 display: inline-block 后，HTML 源码里换行或缩进会被浏览器当成空格字符渲染，产生约 2–4px 的不可见间隙。这不是 bug，是 HTML 解析规则——<img> 标签之间的回车，等价于插入了一个 。
- 开发者工具里选中图片，
margin/padding都为 0，但间隙仍在：说明它不属于任何元素的盒模型 - 间隙宽度随父容器
font-size变化，font-size: 16px时最常见约 4px - 如果图片带文字（比如图注），子元素必须重置
font-size，否则文字会变小
用 float:left 替代 inline-block 能绕过空白，但得处理塌陷和宽度
float: left 不参与行内格式化上下文（IFC），天然无视换行和空格，所以图片能严丝合缝排列。但它把布局逻辑从“自动对齐”变成“手动收尾”。
- 父容器必须触发 BFC，否则高度塌陷：加
overflow: hidden或display: flow-root - 子元素总宽度不能超 100%，建议用
width: calc(100% / 3)而非33.333%，避免四舍五入溢出 - 所有浮动元素需声明
box-sizing: border-box，否则padding或border会让实际宽度超标 - 若图片是行内内容（如嵌在段落中），
float会导致文字环绕，此时不适用
vertical-align: top 是 inline-block 底部留白的真正解药
除了水平间隙，inline-block 图片下方还常有一条“找不到来源”的空白——它来自基线对齐（baseline alignment）。图片默认按基线对齐，而基线下方预留了字母 g/y/p 的 descender 空间，即使没文字也存在。
- 这个空白在开发者工具里无法被高亮选中，
computed面板也查不到对应属性 -
vertical-align: top、middle或bottom都可跳过基线逻辑，推荐用top - 如果图片外层还包了
<label></label>或<span></span>，这些父级也要检查是否继承了vertical-align
现代项目优先用 flex，别为兼容 IE8 强守 inline-block 或 float
除非明确要支持 IE8–9，否则没必要用 inline-block 或 float 做多图排版。Flex 布局既无空白问题，又免去清除浮动、计算宽度、处理塌陷等琐事。
- 父容器加
display: flex，子<img>自动紧贴，换行/空格完全无效 - 用
flex-wrap: wrap控制是否折行，gap显式控制间距，语义清晰可控 - 旧项目升级时注意：若父容器已设
float或inline-block，直接加display: flex会覆盖原有行为，需同步清理冗余样式
真正容易被忽略的是：同一页面里混用 inline-block、float 和 flex 时，它们对父容器 BFC 的要求、对子元素尺寸的解释逻辑完全不同——间隙可能消失，但布局错位会更难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
