块级元素间出现空白通常因设为inline-block后HTML换行空格被解析为文本节点，其宽度受父元素font-size影响；解决方法包括父容器font-size:0、删HTML空白或改用flex布局。
块级元素之间出现空白，通常不是因为 margin 或 padding，而是 HTML 中的换行符和空格被浏览器解析为文本节点（即“空白字符”），而这些文本节点在默认情况下会渲染为一个空格（尤其在 display: inline 或 inline-block 场景下）。但你提到的是“块级元素之间”，所以更可能的情况是：你把块级元素（如 div）写成了 display: inline-block，或者父容器内有多个块级元素被意外设为 inline 类行为——这时 font-size 和 display 就成了关键控制点。
为什么 inline-block 元素间会有空白？
当元素设为 display: inline-block 时，HTML 源码中的换行、缩进、空格都会被当作文本节点处理，浏览器按行内格式化上下文（IFC）将其渲染为一个“空格字符”。这个空格的宽度受父元素的 font-size 影响——font-size: 16px 时，空格宽度约等于 4px（典型值，因字体而异）；设为 0 就几乎消失。
常用解决方法（按推荐顺序）
✅ 方法一：父容器设 font-size: 0，子元素重置 font-size
- 适用于父容器只包含 inline-block 子项，且子项自身需要文字内容
- 代码示例：
<div style="font-size: 0">
<div style="display: inline-block; font-size: 14px">A</div>
<div style="display: inline-block; font-size: 14px">B</div>
</div>
✅ 方法二：移除 HTML 源码中的空白（不推荐维护）
立即学习“前端免费学习笔记（深入）”；
- 把标签写成连写形式：
<div>A</div><div>B</div> - 虽有效但降低可读性，团队协作中易出错
✅ 方法三：使用 flex 布局替代 inline-block
- 父容器设
display: flex，天然忽略空白文本节点 - 子项默认不换行，用
flex-wrap: wrap控制折行 - 无空白干扰，语义清晰，响应式友好
注意：纯 block 元素之间本不该有空白
如果两个 div 都是默认 display: block，它们之间出现“空白”，那其实是 margin-bottom / margin-top 的外边距合并（collapsing margin）导致的视觉间距，和 font-size 无关。此时应检查：
- 是否设置了 margin（尤其 p、h 系列等自带 margin 的元素）
- 父容器是否有 overflow: hidden 或 border，影响 margin 合并规则
- 用 DevTools 查看 computed margin，确认是不是“看起来像空白”的实际外边距
基本上就这些。核心记住：空白节点只在 inline/inline-block 上下文中生效；font-size 控制它的宽度；display 改变布局模式就能绕过它。不复杂但容易忽略。
