最有效方法是直接给 input[type="radio"] 设置 margin-right（8–16px），精准作用于按钮本身而不影响语义；横向排列推荐容器用 display: flex + gap，避免 inline-block 或 float 等过时方案。
直接给 input[type="radio"] 加 margin-right 最有效
单选按钮（input[type="radio"]）默认是 inline-level 元素，它右侧加 margin-right 能直接生效，且不影响其与关联 label 的语义绑定。关键不是动 label 或容器，而是精准作用于 radio 本身。
- 写法示例：
.form-group input[type="radio"] { margin-right: 12px; } - 值推荐范围：8–16px，太小不明显，超过 20px 易在窄容器中换行
- 避免用
margin-left：会导致首项左侧多出空白，视觉不齐 - 若样式不生效，先检查是否被更具体的选择器覆盖；必要时加
!important，但应优先提升选择器特异性
横向排列必须统一控制容器流式行为
单纯设 input 为 inline-block 不够——它无内容尺寸，不配 vertical-align 容易和文字基线错位；而只靠 HTML 换行空格又不可控。真正稳的方案是让容器接管布局逻辑。
- 推荐用
display: flex+gap：.radio-group { display: flex; gap: 12px; align-items: center; } - 必须包裹所有
input+label对，不能只包input - 禁用
flex-wrap: wrap，否则小屏下会意外折行；如需响应式，改用flex-wrap: nowrap+overflow-x: auto - 若需兼容 IE11，退回到
inline-block方案：给每个label设display: inline-block; vertical-align: middle;，再统一设margin-right
别碰 cellspacing、float 或全局 letter-spacing
这些看似相关，实则属于不同层级的干扰项，强行使用反而引入新问题。
-
cellspacing是表格属性，RadioButtonList渲染为<table> 时才可能涉及，但它的作用对象是单元格边框间距，无法单独控制 radio 按钮之间的距离 <li> <code>float: left会让 radio 脱离文档流，导致后续元素错位，且clear处理麻烦，现代布局中已淘汰 - 给
button或label设letter-spacing对 radio 组无效——它只影响文本字符间距，不作用于input元素本身 - 修改
line-height或font-size来“挤”间距，属于副作用驱动，不可预测且易破环可访问性 - 不要试图改
CellPadding或CellSpacing属性：它们控制的是<td> 内容与边框、<code><td> 与 <code><td> 的距离，和按钮间距无关 <li>如果用了 <code>RepeatDirection="Horizontal"，仍会渲染为单行<tr>，但 <code><td> 变成并排，此时 <code>margin-right依然有效，无需额外处理 - 动态加载或 UpdatePanel 刷新后样式丢失？确认 CSS 文件未被缓存，或把规则移到
内联样式中临时验证
实际中最容易被忽略的是：**radio 按钮的视觉间距 ≠ label 文本的间距**。你调的是按钮自身的位置，label 仍按正常流排布。若发现按钮和文字之间看起来太近或太远，问题不在 margin，而在 label 的
ASP.NET WebForms 的 RadioButtonList 需额外注意渲染结构
它默认输出为 <table>，每个选项是一行 <code><tr>，radio 和 label 嵌套在 <code><td> 内。这意味着你写的 CSS 必须穿透两层结构才能命中目标元素。
<ul>
<li>正确选择器：<code>.formtext table input[type="radio"] 或更稳妥的 .formtext input[type="radio"]（依赖 specificity）
margin-left 或 padding-left ——那是另一个独立控制点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
