inline-block元素间4px间隙源于HTML解析器将换行符/空格渲染为文本节点，宽度≈父容器font-size的0.25em；解决方案包括父容器设font-size:0并显式重置子元素字号，或改用display:flex+gap布局。
inline-block元素换行就出4px间隙
这是最常被当成“CSS没调好”的问题：明明写了 display: inline-block，按钮、图标、导航项横向排不齐，用开发者工具看 DOM 结构完全正常，但视觉上就是多出约 4px 空隙。根源不是 margin 或 padding，是 HTML 解析器把源码里的换行符当成了文本节点，再按父容器的 font-size 渲染成一个空格宽度。
典型错误写法：
<div class="toolbar"> <button>保存</button> <button>取消</button> <input type="text"> </div>
- 只要
<button></button>和<input>在不同行，且父容器未干预，间隙必现 - 哪怕只缩进两个空格，也会触发——换行和空格在解析层是等价的
- 这个间隙会随父容器
font-size变化：设为12px时约 3px，16px时约 4px
font-size: 0方案漏重置子元素字体
很多人知道加 font-size: 0 能压掉间隙，但忘了子元素必须显式恢复字号，否则文字直接消失。更隐蔽的是：某些表单控件（如 <input type="number">）内部 placeholder 文字可能继承 font-size: 0，导致占位符不可见。
错误示范：
立即学习“前端免费学习笔记（深入）”；
.toolbar {
font-size: 0;
}
.toolbar button {
display: inline-block;
/* 漏了 font-size */
}-
<button></button>文字没了，因为继承了父级0 -
<input>的 placeholder 在部分浏览器里也变透明 - 如果用了伪元素（如
::before插入图标），同样会因font-size: 0失效
正确做法是子元素统一重置：font-size: 14px 或 font-size: inherit（但需确保父链有值）。
flex + gap写法误加margin破坏对齐
改用 display: flex 是推荐解法，但有人以为 gap 是“补充”而不是“替代”，继续给每个子元素加 margin-right，结果首尾多出冗余间距，或响应式断点下错位加剧。
错误示范：
立即学习“前端免费学习笔记（深入）”；
.toolbar {
display: flex;
gap: 8px;
}
.toolbar > * {
margin-right: 4px; /* 冗余！gap 已负责间距 */
}-
gap作用于相邻项之间，首尾无额外空间；加margin-right后，最后一个元素右侧凭空多出 4px - 当容器宽度刚好卡住所有子项+
gap时，加margin会直接导致换行 -
gap支持gap: 8px 12px（行距 列距），比手动算margin更可控
动态插入HTML仍带换行字符串
用 JavaScript 拼接 HTML 时，以为“JS 生成就自动干净”，结果模板字符串里留了换行，照样触发空白渲染。jQuery 的 .html()、原生 element.innerHTML 都按标准 HTML 规则解析字符串，换行符照常变成文本节点。
错误写法：
const html = `<button>-</button><input type="number" value="1"><button>+</button>`; // \n 存在 → 间隙照旧 container.innerHTML = html;
- ES6 模板字符串中的
\n和空格，和静态 HTML 换行效果完全一致 - 用
+=多次拼接，中间若含换行，结果一样 - 安全写法只有两种：连写无换行，或用
font-size: 0/flex 统一兜底
真正容易被忽略的是：静态 HTML 和动态 HTML 的空白行为本质一致，差异只在你有没有主动引入换行——别信“JS 插入就天然紧凑”这种经验误区。
