应使用包裹和文字，设display: inline-flex; align-items: center; gap: 6px;控制按钮与文字间距，父容器用display: flex; gap: 12px;统一管理选项间距离，确保点击热区完整且兼容响应式。
单选框与文字之间空隙太小，怎么加间距
直接给 <input type="radio"> 加 margin-right 或空格字符不可靠：浏览器会忽略连续空格，且 input 是替换元素，外边距行为在不同浏览器中不一致。真正可控的方式是用 <label></label> 包裹整个单选框和文字，再对 label 内部结构做间隙控制。
- 确保每个选项都写成
<label><input type="radio" name="x"> 选项文字</label>，不要把input和文字分开写 - 给
label设置display: inline-flex; align-items: center;，这样按钮和文字能垂直居中对齐 - 在
label内部用gap: 6px;控制input与文字之间的间隙（注意：不是margin，gap更稳定） - 避免用
input和文字之间——语义混乱、缩进不可控、响应式下易错位
为什么不能只对 input 设置 margin
input 默认是行内替换元素，margin-top/margin-bottom 在某些文档流中可能失效；margin-left/margin-right 虽然常生效，但一旦父容器用了 flex 或 grid，就容易被对齐逻辑覆盖。更关键的是，单独调 input 的间距，会破坏 label 点击热区的完整性——用户点文字边缘可能无法触发选中。
- 点击区域应覆盖整个
label，而不是仅input框本身 - 如果硬改
input的margin，需同步调整label的padding来补全热区，徒增维护成本 - 移动端点击精度低，热区缩小后容易误操作
横向排列时各选项之间怎么留统一间距
当多个 label 并排显示，用 margin-right 给每个加间隔，最后一个会多出多余空白，必须额外写 :last-child { margin-right: 0; }。更干净的做法是让父容器承担间距责任。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 父容器设
display: flex; flex-wrap: wrap; gap: 12px; - 每个
label保持display: inline-flex;或display: flex;即可，无需单独设 margin -
gap自动跳过最后一个子项，不存在“末尾多一格”的问题 - 若需响应式断行，
flex-wrap: wrap配合gap仍能保证换行后行间/项间间距一致
兼容性与可访问性容易被忽略的点
老版本 Safari（gap 作用于 inline-flex 容器，但支持作用于 flex 父容器。所以实际项目中，建议把横向布局逻辑上收一层：父容器用 display: flex + gap，子 label 用 display: inline-flex + gap 控制内部按钮文字间距——这样既保兼容，又保语义清晰。
立即学习“前端免费学习笔记（深入）”；
另外，别漏掉 input 的 id 和 label 的 for 属性配对，否则屏幕阅读器无法正确关联，这比间隙大小更重要。
