inline-block元素间4px间隙源于HTML换行符被解析为文本节点，非margin问题；最稳解法是父容器设font-size:0，子元素显式恢复字号。
inline-block 元素间 4px 间隙怎么消失
这不是 margin 没清干净，是 HTML 解析器把换行符当成了文本节点，渲染出一个宽度约 4px 的空格（≈ 0.25em × 父元素 font-size）。你给子元素设 margin: 0 完全无效。
最稳的现场解法：font-size: 0 加在父容器上，再给每个子元素显式恢复字号。比如按钮组：
.btn-group {
font-size: 0;
}
.btn-group > button,
.btn-group > input {
font-size: 14px;
display: inline-block; /* 显式声明，防意外 */
}
- 兼容 IE8+ 和所有现代浏览器，不影响可访问性
- 表单控件如
的 placeholder 不会丢，但若发现文字异常，单独加font-size即可 - 别对
或设font-size: 0，否则全局文字消失
什么时候该用 ，什么时候不该用
是不可断行的空格，语义是“这里必须有一个空格，且前后词不能拆开”。它不是“多打几个空格”的快捷键。
适合场景：
- 防止 “¥100” 被折成两行
- 阻止 “Mr. Smith” 中间断行
- 表格空单元格占位：
不该用的场景：
- 给标题加左右间距 → 改用
padding或margin - 对齐按钮内文字 → 用
text-align或flex，不是靠塞 - 模拟段落缩进 → 用
text-indent或padding-left
常见翻车点：&nbps;（拼错）、 （缺分号）、复制时混入零宽空格（如 ），都会原样输出字符串而不是空格。
动态 JS 插入 HTML 时怎么避免空白间隙
用 element.innerHTML = '...' 或 jQuery 的 .html() 时，只要字符串里含换行或空格，照样触发 HTML 解析规则，生成幽灵文本节点。
正确写法是紧凑拼接，不换行、不缩进：
document.getElementById('container').innerHTML =
'<button>-</button><input type="number" value="1"><button>+</button>';
- ES6 模板字符串也一样：写成
`...`，别换行 - 用
+=多次拼接容易漏掉空格，建议一次性赋值 - 如果结构复杂必须换行，改用
document.createElement+appendChild，完全绕过字符串解析
想保留原文空格和换行，该用 white-space
最简单，但副作用明显：默认等宽字体、不自动换行、破坏语义（它本意是“预格式化文本”，不是通用排版工具）。
更可控的做法是给容器加 CSS：
-
white-space: pre-wrap：保留空格和换行，同时允许自动折行（推荐用于日志、诗歌、用户提交内容） -
white-space: pre-line：只保留换行，合并多余空格（适合纯换行分隔的列表） -
white-space: nowrap：合并空格 + 禁止折行（慎用！图标+文字若靠空格分隔，可能粘连）
注意：white-space 只影响元素内部文本流，不影响子元素之间的布局间隙——那是另一套规则。
真正难处理的，是那些既想保持 HTML 源码可读性、又得消除间隙的场景。这时候 font-size: 0 和 flex + gap 是唯二靠谱路径，其他方案要么污染语义，要么埋下兼容性雷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
