HTML间距必须由CSS的margin、padding和gap精确控制，而非空格或换行；因空格受font-size影响不可控，会触发热区、破坏flex/grid布局，且动态渲染不一致。
HTML里没有“空格间隙设置”这回事——所有视觉上的间距都该由 CSS 的 margin、padding 和 gap 精确控制，而不是靠敲空格、换行或塞 。
为什么不能用 HTML 空格凑间距
浏览器会把多个连续空格、换行符、制表符合并成一个空格字符（除非用 或 <pre class="brush:php;toolbar:false;"></pre>），而且这个空格的宽度受父容器 font-size 和 line-height 影响，不可控。更麻烦的是：它只在 inline/inline-block 上生效，对 flex/grid 容器无效；还会意外触发点击热区（比如按钮之间点空白也能响应）；一旦内容动态插入（如 JS 拼接），空格可能直接消失，导致静态和动态渲染不一致。
常见症状包括：button 贴边、img 下方多出 4px 缝隙、li 项间莫名错位、表格列挤成一团。
用 margin/padding/gap 替代空格的实操原则
三者分工明确，混用会叠加出意料之外的间距：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
margin：控制元素**外部**距离，比如段落之间、卡片与卡片之间、表单字段上下留白 -
padding：控制元素**内部**内容与边框的距离，比如按钮文字离边缘、td内容离边线 -
gap：仅用于display: flex或display: grid容器，专管**子项之间**的间距，不继承、不塌陷、不参与事件捕获
推荐做法：
- 全局定义一套间距变量，例如
--space-sm: 8px、--space-md: 16px，所有margin/padding/gap都从这取值 - 按钮组、筛选栏、操作栏优先用
display: flex; gap: var(--space-sm)，别写margin-right+:last-child - 表格单元格统一写
td, th { padding: 8px 12px; }，别碰margin（它对td无效） - 清除默认外边距：
button, input, select, textarea { margin: 0; }，尤其 Safari 旧版自带margin
inline-block 元素间 4px 间隙怎么彻底消失
这是管理系统最常踩的坑：源码里一换行，浏览器就生成一个文本节点，渲染为约 4px 间隙（由父容器 font-size 决定）。临时方案不治本，长期要切换布局模型。
- 现场急救最稳：
.container { font-size: 0; }+.container > * { font-size: 14px; display: inline-block; }（漏重置子元素字体，文字就看不见） - 长期方案首选：
.container { display: flex; gap: 12px; }—— 它天然忽略源码空白，且支持gap: 12px 8px分别控制行列 - 临时绕过（不推荐）：
<button></button><!-- --><input><!-- --><button></button>，可读性差，JS 动态插入时难维护
图片下方和行内元素底部留白怎么清
img 默认是 inline 元素，会像字母 y 或 g 一样预留下行间距（descender space），所以底部总有多余空白。这不是 bug，是排版行为。
- 最简解法：
img { vertical-align: middle; }或vertical-align: top;（避免用bottom，它仍留空隙） - 更彻底：
img { display: block; }，但注意它会独占一行，需配合父容器display: flex才能并排 - 若父容器含多个 inline 元素（如
img+span），统一设font-size: 0是最快见效方式，再单独恢复子元素字体 - 别用
line-height: 0清图下空隙——它会影响所有行内内容，包括文字基线
真正难的不是清掉那几个像素，而是意识到：只要还在用 inline/inline-block 布局，你就得反复处理这些由文本流衍生的副作用。现代项目里，flex 和 grid 不只是“更方便”，它们让间距逻辑回归到容器本身，不再被 HTML 源码格式绑架。
