HTML空白符导致inline/inline-block元素间约4px间隙，源于换行缩进被解析为文本节点；可通过删源码空白、font-size:0+子元素重置、HTML注释或flex+gap解决。
空格间隙不是CSS没写对，而是浏览器把源码里的换行、缩进、空格当成了真实文本节点——定位前先确认是不是这个原因。
怎么看是不是HTML空白符导致的间隙
打开开发者工具，选中出问题的元素，看Elements面板里标签之间有没有换行或空格。如果两个
@@##@@ @@##@@
那基本就是它了。这种间隙固定约4px，且只出现在display: inline或inline-block元素之间（比如
、、）。
- 用
getComputedStyle(el).display查元素实际display值，别只看CSS规则 - 右键“Edit as HTML”，删掉标签间所有换行和空格再刷新，间隙消失就坐实了
- 注意：动态插入的HTML（如jQuery
.html()拼接）通常没这问题，因为字符串里没换行
font-size: 0方案为什么有时失效
给父容器设font-size: 0能干掉空白符，但容易漏掉几个关键点：
-
等表单控件内部placeholder文字会变小甚至不可见，得单独加font-size: 16px - 子元素用了
em单位（比如padding: 0.5em），会继承font-size: 0导致padding为0 - 父容器本身有
line-height，会影响vertical-align表现，建议同步设line-height: 1 - 如果子元素里还有嵌套文本（比如按钮里有图标+文字），只设一层
font-size可能不够
Flex gap比margin更稳的三个场景
当你要管多个元素间距时，gap比一堆margin更可靠：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 响应式换行：
flex-wrap: wrap+gap，换行后每行首尾不额外留空；而margin-right在末尾元素上还得手动清除 - DOM动态增减：新增一个
gap自动生效；margin得重算类名或JS干预 - 垂直+水平统一控制：
gap: 12px 8px一行搞定，不用分开写margin-bottom和margin-right
老版Safari不支持gap？用@supports (gap: 1rem)包裹，降级回margin即可。
哪些地方千万别用letter-spacing负值“修复”间隙
letter-spacing: -4px看着能把间缝隙吃掉，但副作用太硬：
- 影响所有子文本字符间距，中文标题变挤、英文单词字母糊在一起
-
里带图标（SVG/字体图标）会被一起压缩，图标错位 - 屏幕缩放或系统字体设置变更后，负值不再匹配，间隙又回来
- CSS动画中
letter-spacing性能较差，滚动时易掉帧
真正要调字符间距，用word-spacing或 ，别碰letter-spacing来治布局病。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
