Input radio调整勾选框与文字的距离

可以使用 CSS 的 `padding` 属性来控制勾选框与文字之间的距离。具体实现方法是：

1. 给需要调整距离的元素添加一个类名，例如 `padding-radio`；
2. 在 CSS 中定义该类的样式，设置 `padding-left` 或 `padding-right` 的值即可。

示例代码如下：

HTML：

<label class="padding-radio">
  <input type="radio" name="padding" value="left" checked>
  <span>勾选框在左侧</span>
</label>
<label class="padding-radio">
  <input type="radio" name="padding" value="right">
  <span>勾选框在右侧</span>
</label>

CSS：

.padding-radio {
  /* 设置左右 padding 来调整距离 */
  padding-left: 20px;
  /*padding-right: 20px;*/
}

.padding-radio input[type="radio"] {
  /* 移除默认的勾选框 */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* 自定义勾选框 */
  width: 16px;
  height: 16px;
  border: 1px solid #ccc;
  border-radius: 50%;
  outline: none;
  vertical-align: middle;
  cursor: pointer;
}

.padding-radio input[type="radio"]:checked {
  /* 勾选时改变样式 */
  background-color: #007bff;
  border-color: #007bff;
}

.padding-radio input[type="radio"] + span {
  /* 调整文字和勾选框的距离 */
  padding-left: 10px;
  /*padding-right: 10px;*/
}

这样，当用户选择不同的 radio 选项时，勾选框和文字的距离就会相应地调整。注意，如果勾选框在右侧，需要将 `padding-left` 改为 `padding-right`。