inline-block元素间间隙源于HTML解析器将换行/空格渲染为0.25em宽的空格字符；推荐font-size:0+子元素重设字号（IE8+兼容）或现代flex+gap方案。
HTML源码里的空格、换行、制表符，浏览器默认会渲染成一个可见空格；这不是bug，是规范行为。想“清除空格”，本质是控制这些空白字符是否参与布局，而不是删掉它们。
inline-block 元素间为什么总有间隙
因为 <picture></picture>、<img alt="HTML空格间隙与CSS布局的配合使用" >（未设 display: block）等元素默认是 inline 或 inline-block，HTML中标签间的换行/缩进会被解析为一个空格字符，最终在渲染时表现为像素级水平间隙。
- 哪怕你写了
margin: 0、padding: 0，这个间隙依然存在——它不是 margin，是文本内容级别的空白 - 用开发者工具选中元素，能看到间隙出现在元素盒模型的“外部”，不属于任何元素的 box
- 最直接验证方式：把所有
<picture></picture>写在同一行，间隙消失（但代码可读性暴跌）
white-space: nowrap 能不能解决图片间隙
不能。 white-space: nowrap 只影响**文本内容内部**的换行行为，对 inline 元素之间的布局间隙毫无作用。
- 它只作用于元素的
textContent，比如段落里的一串文字；不控制子元素排列 - 给父容器设
white-space: nowrap，顶多让里面的文字不换行，但<picture></picture>之间该有的空格还是照常渲染 - 真正该用的是
display: flex或font-size: 0这类布局级干预手段
font-size: 0 是最稳妥的“清空格”方案吗
对纯 inline/inline-block 布局来说，它是简单有效的，但有副作用，得小心用。
立即学习“前端免费学习笔记（深入）”；
- 原理：空格渲染高度取决于父容器的
font-size，设为0后，空格“没字号”，视觉上消失 - 副作用：子元素如果继承了
font-size: 0（比如没重置文字），文字就看不见了——必须显式给子元素设回字号，如font-size: 16px - 兼容性好，IE8+ 都支持；但语义上有点“歪打正着”，不如 Flexbox 直观可控
- 别在 body 上全局设
font-size: 0，否则整个页面文字都失效
为什么推荐优先用 display: flex 替代空格清理技巧
因为 Flexbox 从布局模型层面绕过了“空格渲染”问题，不再依赖 HTML 源码格式，也不污染字体设置。
- 一旦父容器设了
display: flex，子元素自动变成 flex item，HTML 中的空白符完全不参与布局计算 -
gap属性能精确控制元素间距，比手动调margin更可靠（无首尾额外 margin 问题） - 响应式友好：
flex-wrap+gap可自然适配多行，而font-size: 0在换行场景下可能失效 - 注意：旧版 Safari（gap 支持需加
-webkit-gap前缀
空格间隙的本质是 HTML 解析规则与 CSS 渲染模型的交汇点。靠删空格或塞 治标，用 flex 或 grid 治本；但如果项目要兼容 IE11，font-size: 0 加子元素重置字号仍是绕不开的实操方案。
