推荐用 display: flex + gap 控制 radio 按钮间距，按钮与文字间用 label 的 flex + gap 管理，按钮间用父容器 flex + gap 统一控制，避免混用 margin 导致空白叠加。
radio 按钮之间加水平间距，用 margin-right 最直接
ASP.NET WebForms 的 RadioButtonList 渲染成表格结构，每个选项是独立 <tr>，所以不能靠父容器设 <code>gap。必须精准作用于 input[type="radio"] 元素本身。
直接给单选按钮加右侧外边距，既不影响文字对齐，也不破坏语义绑定：
-
.formtext input[type="radio"] { margin-right: 12px; }—— 推荐值范围 8–16px，按设计密度调整 - 不要写
margin-left：会导致第一个按钮左侧多出空白 - 避免用
float: left：会脱离文档流，可能引发父容器塌陷，且在 flex/grid 环境中冲突 - 若样式不生效，检查 CSS 加载顺序；必要时加
!important，但优先确保选择器权重足够
radio 和文字之间留空，gap 比 margin 更可控
用 <label></label> 包裹 <input> 是标准写法，此时两者是父子关系。想控制按钮和文字之间的距离，关键不是动 input 的 margin，而是让 label 成为 flex 容器。
这样能绕过 vertical-align 的不可预测性，同时统一管理内间距：
立即学习“前端免费学习笔记（深入）”；
- 给
label设display: flex; align-items: center; gap: 8px; -
gap会自动作用于input和后续文本节点（或子元素）之间，无需手动算像素偏移 - 不要在
input上设vertical-align: middle：中文下极易偏高，且不同浏览器渲染基准不一致 - 如果结构不允许改
label样式（如 legacy 系统），可退而求其次用margin-left: 4px作用于文字容器，但需配合字体大小做像素级微调
整组 radio 横向排列 + 间距一致，display: flex + gap 是首选
当所有单选按钮都在同一父容器下（比如普通 HTML 表单），最干净的方案是让父容器变 flex，再靠 gap 统一控制项间距离。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
这比逐个写 margin-right 更可靠，尤其在响应式换行场景下：
- 父容器加
display: flex; flex-wrap: wrap; gap: 12px; - 每个选项用
<label><input type="radio">文字</label>，确保结构一致 - 避免用
white-space: nowrap强压一行：窄屏下内容溢出不可控，flex-wrap: wrap才是正确应对方式 - 慎用
inline-block：HTML 源码中的换行符和空格会被渲染为空格，导致间距不均；flex 完全规避该问题
Grid 布局下 radio 选项宽度不均，min-width: 0 是关键补丁
用 display: grid 实现等宽列时，常见问题是各选项宽度参差不齐——根源在于 label 默认会根据内部文字撑开，破坏 1fr 分配逻辑。
这不是 bug，而是 Grid 对内容尺寸的默认响应。修复只需一行：
- 给所有
label加min-width: 0;，强制它不因内部文本伸缩而影响轨道分配 - 同时确保
grid-template-columns: repeat(4, 1fr)这类明确列定义存在 - 不要给
input[type="radio"]设width或flex：它只负责状态，样式应由label承担 - IE11 不支持
min-width: 0在 Grid 中的效果，如需兼容，得降级为 float 或 table 布局
真正难调的不是间距数值，而是哪一层该承担哪段距离：按钮之间、按钮与文字之间、选项容器之间，三者要分层控制。混用 margin 和 gap 很容易叠加出双倍空白，或者漏掉某一处导致视觉断裂。
