inline-block元素间换行出现4px间隙，是因为HTML解析器将换行符/空格解析为文本节点，其宽度≈父容器font-size的0.25em（如16px时约4px），仅在inline/inline-block元素、存在源码空白、未用flex/grid且父容器未设font-size:0时发生。
inline-block 元素间换行为什么会出 4px 间隙
因为浏览器把换行符和空格解析成了一个文本节点，而这个文本节点在渲染时被当作一个“空格字符”处理；它的宽度 ≈ 当前 font-size 下一个空格的字宽（通常为 0.25em～0.5em），在默认 font-size: 16px 时约等于 4px。
这种间隙只在满足以下全部条件时出现：
- 元素是
display: inline-block、inline或触发了行内格式化上下文（如img、button默认行为） - 元素在 HTML 源码中存在换行、缩进或空格分隔
- 父容器未抑制空白渲染（比如没设
font-size: 0） - 元素未被 Flex/Grid 容器包裹（
gap会绕过空白逻辑）
为什么 margin 对 <span></span> 无效却对 <div> 有效<p><code>margin 对纯 inline 元素（如未改 display 的 <span></span>、<a></a>）的上下边距不生效，左右 margin 虽然可设但无法推开相邻文本——这是 CSS 规范定义的行为，不是 bug。
真正起作用的是元素的显示类型：
立即学习“前端免费学习笔记（深入）”；
<div> 默认是 <code>display: block，margin完全生效-
<span></span>默认是display: inline，margin-top/bottom被忽略，margin-left/right只影响自身占位，不改变行高或推动其他行内内容 - 想让
<span></span>支持完整margin，必须显式设置display: inline-block或display: block - 用
+=多行拼接字符串（含换行符）→ 仍会带空白 → 间隙照旧 - 用
$().append()创建 DOM 对象时，jQuery 会先 parse HTML 字符串，不同版本对空白的规范化策略不同，结果不稳定 - 用
innerHTML直接赋值，行为与.html()一致：字符串里有空白就有间隙，没空白就没间隙 -
源头控制：HTML 模板和 JS 拼接都写成单行紧凑格式，例如
<div class="item">A</div> <div class="item">B</div>—— 最轻量，但牺牲可读性 -
CSS 抑制：父容器设
font-size: 0，子元素再单独设回字号，例如.group { font-size: 0; } .group > * { font-size: 14px; }—— 兼容性好，但需检查inputplaceholder、伪元素等是否受影响 -
现代布局替代：直接用
display: flex或display: grid，配gap属性，完全绕过 HTML 空白解析逻辑 —— 最干净，但需确认目标浏览器支持度（IE 不支持gap）
静态 HTML 和 JS 动态插入为何渲染不一致
静态 HTML 文件里的换行缩进会被浏览器解析为真实文本节点；而 JS 字符串拼接时若没写换行（如用模板字符串连写 `<button><input><button>`</button></button>），就不会生成这些文本节点，自然无间隙。
但注意这些陷阱：
哪些方案真能统一消除间隙且不埋坑
别依赖注释隔断或负 margin，前者难维护，后者易受字体变化影响；推荐这三种实际项目中验证过的做法：
最容易被忽略的一点：间隙不是“多打了空格”，而是浏览器把空格当作了需要渲染的内容；所以所有修复动作，本质都是在干预“空白字符是否参与布局计算”。
