inline-block元素间4px间隙是HTML解析器将换行符视作文本节点所致，消除方案有三：连写标签、父容器font-size:0+子元素重设、改用flex/grid布局。
为什么 inline-block 元素间总有 4px 间隙
这不是 bug，是 HTML 解析器把源码换行符当作文本节点渲染的结果。只要父容器内两个 inline-block 元素（比如 和 ）之间有换行或空格，浏览器就会生成一个文本节点，宽度 ≈ 当前 font-size 的 1/4（常见为 4px）。这个间隙在开发者工具里看不到 DOM 节点，但用 getBoundingClientRect() 一测就暴露。
消除间隙的三种实操路径及取舍
实际项目中别硬扛“删换行”，得按场景选：
-
静态 HTML 且结构简单：直接连写标签，不换行、不缩进 ——
-
需保留可读性 + 多处复用：用
font-size: 0重置父容器，再给子元素显式设font-size—— 注意input::placeholder可能变小，得单独恢复 -
现代布局优先：改用
display: flex或display: grid，天然无视源码空白，gap直接控距，兼容性已覆盖所有主流浏览器（Chrome 84+/Firefox 63+/Safari 14.1+）
什么时候该用 或 white-space
这些不是用来“撑开布局”的，只用于文本内部微调：
-
100 kg） -
Mr. Smith -
white-space: pre-wrap：比安全，保留换行和空格但不强制等宽字体，适合日志、代码片段展示 - 千万别对按钮组、导航栏这种布局容器设
white-space: nowrap—— 它会让所有子元素挤在同一行，且吞掉中间所有空格，反而更难控制
最容易被忽略的兼容性细节
gap 在 Flex/Grid 中表现一致，但 font-size: 0 对某些旧版 Android WebView 中的 select 下拉箭头有影响；而连写 HTML 字符串在 SSR 场景下会牺牲可读性。真正关键的是：**间隙从来不是“多打几个空格”的问题，而是你有没有明确声明“这是布局关系”还是“这是文本内容”** —— 布局用 CSS，文本用实体，混用必踩坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
