inline-block元素间4px间隙源于HTML换行被解析为文本节点，最稳解法是父容器设font-size: 0并重置子元素字号；长期应改用display: flex+gap，天然忽略空白且精确控距。
HTML空格导致的布局间隙不是CSS没写对，而是源码里的换行和空格被浏览器当成了真实文本节点——直接调margin或padding根本无效。
inline-block元素间4px间隙怎么彻底消失
这是管理系统里最常踩的坑：相邻<div>、<code><button></button>或<img alt="HTML空格导致的布局间隙怎么处理？结构优化教程" >设了display: inline-block，源码一换行，就自动多出约4px水平间隙（由父容器font-size决定）。
- 现场急救最稳：
font-size: 0加在父容器上，再给每个子元素单独设回正常字号，比如.nav a { font-size: 14px; }；漏掉重置，文字就看不见 - 长期方案优先改用
display: flex+gap：它天然忽略源码空白，且支持gap: 8px 12px分别控制行列间距 - 临时绕过可用注释“吃掉”空白：
<button></button><!-- --><button></button>，但结构杂乱、难维护 - 别用
margin-left: -4px硬拉——不同字体下间隙宽度不固定，缩放后错位
图片/图标等内联元素底部为什么总有空白
这不是margin或padding的问题，是<img alt="HTML空格导致的布局间隙怎么处理？结构优化教程" >作为内联元素，默认按基线（baseline）对齐，下方留出空间给字母g、y等降部——即使你写了vertical-align: top，只要父容器有line-height，它仍可能撑高容器。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 最简解法：
img { vertical-align: middle; }或vertical-align: bottom;，比top更稳定 - 根治方案：
img { display: block; }，彻底脱离行内格式化上下文 - 若需保持内联行为（如图文混排），可设父容器
line-height: 0，再单独给文字恢复line-height - 慎用
font-size: 0——虽然能压掉间隙，但若父容器含其他文本，会一并消失
表格单元格内边距为什么padding有效而margin无效
<td>是替换元素，不响应<code>margin；写了margin-left: 16px浏览器直接忽略。所有单元格内边距都得靠padding。
立即学习“前端免费学习笔记（深入）”；
- 标准写法：
td, th { padding: 8px 12px; }（上下8px，左右12px） - 用了
border-collapse: collapse时，某些旧版邮件客户端或IE可能压缩视觉padding，此时可加line-height: 1.4或兜底min-height: 24px - 空单元格要显示边框？不能留空或填普通空格，必须用
- 别给
tr设margin——它不接受外边距，想控制行间距请用padding在td上做
真正难的不是选哪条方案，而是意识到：只要还在用inline-block或float组织主布局，你就永远要跟这些“幽灵空白”反复较劲。现代项目里，flex和grid不是加分项，是默认起点——它们让空白回归语义，而非bug。
