确认间隙是空格导致的方法是：在开发者工具Elements面板中悬停于相邻inline-block标签之间，若高亮显示“\n”或“ ”文本节点，即为空白字符所致；该节点由HTML解析器生成，非CSS产生，且margin、vertical-align、overflow等均无法消除它。
inline-block 元素间 4px 间隙怎么确认是空格导致的
打开开发者工具，选中两个相邻的 inline-block 元素，在 Elements 面板里把光标悬停在标签之间——如果看到一个被高亮的文本节点（显示为 "\n" 或 " "），基本就是它了。这个节点不是 CSS 生成的，而是 HTML 解析器把换行符或空格当成了真实内容。
常见误判点：
- 以为
margin: 0没生效 → 其实 margin 真的为 0，但空白文本节点还在 - 检查了所有子元素的
vertical-align却没效果 → 这个属性只影响对齐，不消灭间隙本身 - 在父容器加了
overflow: hidden→ 它裁剪的是溢出内容，对空白文本节点无效
font-size: 0 方案为什么必须重置子元素字号
font-size: 0 是让空白文本节点“没宽度”，但它会继承到所有后代。如果子元素没显式设字号，文字就真看不见了——尤其容易漏掉 input、button 里的文字，或 span 中的图标文字。
实操要点：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 父容器用
font-size: 0，子元素统一用font-size: 16px（或按设计稿基准值） - 若子元素含
placeholder，需单独给::placeholder设字体，否则可能变小或不可见 - 避免对整个
body或html设font-size: 0，否则全局文本崩溃
flex 布局替代 inline-block 的兼容性底线
现代项目首选 display: flex，但得看目标环境。2026 年绝大多数场景已无压力，唯独两类要留意：
- 老版 Safari（≤12.1）不支持
gap→ 必须用@supports (gap: 1px)降级为margin模拟 - IE11 完全不支持 flex → 如果还不能放弃 IE，就别碰这个方案，老老实实用
font-size: 0或删空格
注意：flex 天然忽略源码空白，所以你写成多行、带缩进的 HTML，完全不影响渲染——这是它比 inline-block 更省心的根本原因。
HTML 源码删空格后可读性差怎么办
硬删换行和空格（如写成 <div></div>
<div></div>
<div></div>）确实能根治，但团队协作时别人改代码会抓狂。折中方案更实用：
- 用注释隔断：
<div></div> <!-- --><div></div> <!-- --><div></div>，既消除空白又保留结构可读性 - 构建时用 HTML 压缩工具（如 html-minifier）自动处理，开发阶段保持格式，上线前压缩
- 若用 Vue/React，JSX 中的换行不会产生空白文本节点，天然规避该问题
真正难搞的不是怎么删，而是删完之后忘了某些子元素依赖父容器的 line-height 或 vertical-align 来对齐——这些隐式依赖在空格消失后会突然暴露出来，得挨个验证。
