inline-block元素间4px间隙源于HTML解析器将换行/空格转为文本节点，宽度=父容器font-size的0.25em；彻底消除方案包括父容器设font-size:0+子元素重置字号、改用display:flex+gap，或HTML注释消除空白。
inline-block 元素间 4px 间隙怎么彻底消失
这是管理系统里最常踩的坑：把按钮、标签、操作栏写成 display: inline-block，HTML 源码里一换行，浏览器就自动加一个空格节点，渲染出约 4px 的间隙（由父容器 font-size 决定）。
现场急救最稳：font-size: 0 加在父容器上，再给子元素单独恢复 font-size（否则文字消失）。
长期方案优先改用 display: flex，配 gap——它天然忽略源码空白，且支持 gap: 12px 8px 分别控制行列间距。
临时绕过： 写成一行，或用注释“吃掉”空白：，但可读性和维护性差。
white-space: pre 和 pre-wrap 该选哪个
两者都保留源码中的空格与换行，但行为关键不同：
-
white-space: pre：完全不换行，超出容器也不折行，适合代码块、日志输出等必须保持原始格式的场景 -
white-space: pre-wrap：保留空格和换行，但允许在必要时折行，更适合用户输入的富文本预览、地址字段、备注说明等
注意：pre 下的连续空格会被渲染为多个空格，而 normal 下无论你敲多少空格都只显示一个——这不是 bug，是 HTML 规范。
letter-spacing 和 word-spacing 能不能用来调布局
不能当布局工具用。这两个属性属于排印层微调，只影响字符/单词之间的视觉距离，不改变盒模型尺寸，也不触发重排（reflow），所以对 margin/padding/gap 控制的物理间距无替代作用。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
典型误用场景：
- 想让两个按钮之间留点空，却给按钮加
letter-spacing: 20px→ 实际是把按钮内文字撑开，按钮宽度变大，但间隙不可控、不一致 - 用
word-spacing给中文加空 → 中文没有“单词”概念，浏览器表现不稳定，部分引擎甚至忽略
真正要调按钮/卡片/表单项之间的距离，请直接用 margin 或容器级 gap。
gap 属性在 flex 和 grid 中为什么比 margin 更可靠
gap 是专为容器内子项设计的间距控制机制，天然规避了传统 margin 的三大问题：
- 不会触发外边距合并（margin collapse），
gap: 12px就是实打实 12px，不会被相邻元素“吃掉” - 不依赖子元素是否 display: block/inline-block，flex/grid 子项默认无视
margin的某些行为（如 vertical margin 对 inline 元素无效） - 支持二维控制：
gap: 8px 16px直接定义行距和列距，不用分别写margin-bottom和margin-right
兼容性注意：IE 完全不支持 gap，若需兼容 IE11，必须回退到 margin + 伪类（如 :not(:last-child)）组合方案。
最易被忽略的一点：gap 只作用于直系子元素。如果你在 flex 容器里套了一层 div 再放按钮，那 gap 对按钮无效——得把按钮提一层，或者把中间那层也设为 display: contents（注意该值在旧版 Safari 中支持有限）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
