直接敲空格无法等宽，因HTML解析器将连续空白压缩为单个空格且其宽度随字体变化；真正等宽需用flex/grid的gap，或文本内慎用、等实体。

为什么直接敲空格无法等宽

HTML 解析器会把连续空格、换行、制表符全部压缩成一个普通空格，且这个空格宽度随字体变化（比如 font-family: monospace 下是固定宽，sans-serif 下不是）。你在源码里写十个  ，渲染出来也未必是“十倍等宽”，因为浏览器对   的处理仍受字体度量影响；更别说  、  这些实体，它们的宽度是相对当前字体的“字宽”比例值，不是绝对像素。

gap 是唯一真正等宽的布局方案

只有 gap 能保证相邻子项之间**严格相等、像素级精确**的间隙，且不受字体、内容、换行干扰：

• gap 必须用在 display: flex 或 display: grid 容器上，其他布局方式（inline-block、float）下无效
• 写法是 gap: 12px，表示所有相邻子项之间都是 12px，首尾项到容器边缘无额外间隙
• 旧版 Safari（≤15.4）需加前缀：-webkit-gap: 12px，否则间隙消失
• 不能靠 gap 控制“第一个元素前”或“最后一个元素后”的留白——那部分得用 padding

不用 gap 时，margin 怎么勉强做到视觉等宽

当结构受限（比如 CMS 输出固定 HTML、必须兼容 IE）只能用 margin 时，容易踩这些坑：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 别写 margin: 0 12px 给每个子项——首尾会多出 12px，变成“两端空太多”
• 正确做法：统一设 margin-right: 12px，再用 :nth-child(last-of-type) { margin-right: 0 } 清掉最后一个
• 垂直方向优先用 margin-bottom，避免上下 margin 合并导致间距翻倍
• 行内元素（如 span、a）要先加 display: inline-block，否则 margin 在部分浏览器中不生效

文本内需要等宽空格？优先选   和  

仅限纯文本内部（非布局），比如中西文混排对齐、代码注释缩进：

•   ≈ 半个汉字宽，适合常规分隔
•   ≈ 一个汉字宽，适合中文段落首行缩进或表格对齐
•  （六分之一字宽）和  （窄空格）更适合标点与字母间微调，但实际渲染宽度仍依赖字体支持
• 别用 white-space: pre 或
  实现等宽——它们强制等宽字体、破坏语义，且无法响应式缩放

真正容易被忽略的是：等宽 ≠ 等视觉节奏。字体不同、字号不同、设备不同，  和 gap: 12px 的“12px”虽然数值相同，但人眼感知的疏密感可能完全不同。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！