复选框后空格间隙源于文本节点，非CSS margin；删空格、font-size:0、flex布局可解决，但需兼顾可读性、语义及可访问性。
复选框后空格间隙的根源是文本节点，不是CSS margin
浏览器会把 后面的换行、缩进或空格解析成一个真实的 Text 节点，它有宽度（受父容器 font-size 影响），导致视觉上出现约 4px 的间隙。这不是 margin 或 padding，所以清空样式表里的默认外边距没用。
直接删空格最可靠，但破坏可读性
把标签写在同一行能彻底消灭间隙：
<label><input type="checkbox">同意条款</label>
但实际项目中，HTML 很难全写成一行。尤其当 label 文本较长、或需 i18n 插值时，硬塞一行会让维护成本飙升。不推荐在多人协作或模板引擎（如 Vue SFC、Nunjucks）中强行使用。
font-size: 0 是平衡可读性与效果的常用解法
给包含复选框的容器设 font-size: 0，再单独为 label 文本恢复字号：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
.checkbox-group { font-size: 0; }.checkbox-group label { font-size: 14px; }- 注意：若 label 内含
或图标，也要确保它们显式设置了font-size，否则可能变小或不可见 - 该方案对
同样有效
Flex 布局可一劳永逸，但要小心 label 结构
用 display: flex 替代文本流，空白字符自动失效：
.checkbox-group { display: flex; align-items: center; gap: 8px; }
但必须确认 label 的结构是扁平的——如果 label 里嵌套了 div 或 p，flex 会打乱原有语义和换行逻辑。更稳妥的是把 和文字内容分拆为两个独立子元素，再由 flex 排列。
真正容易被忽略的是：所有这些方法都只解决「视觉间隙」，不影响复选框本身的 focus outline、可访问性顺序或屏幕阅读器播报。间隙消失后，务必用键盘 Tab 测试焦点流是否连续，别为了“看起来整齐”牺牲基础可用性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
