如何实现复选框与文本垂直对齐、单选按钮与文本水平对齐并拉近间距？

1. 修复复选框/单选按钮与文本的对齐及间距问题 #

你的核心问题是全局input样式设置了width: 100%，导致复选框、单选按钮被强行拉伸，同时默认外边距也干扰了间距。需要单独为这两类控件重置样式：

/* 针对复选框和单选按钮重置全局样式 */
input[type="checkbox"],
input[type="radio"] {
  width: auto; /* 取消100%宽度，恢复控件本身大小 */
  height: auto; /* 取消固定高度 */
  margin: 0 6px 0 0; /* 只保留右侧与文本的间距，数值按需调整 */
  vertical-align: middle; /* 实现与文本垂直居中对齐 */
}

2. 确保单选按钮与文本水平对齐 #

如果需要单选按钮和文本在同一行水平排布，给它们的父容器设置弹性布局，避免换行：

/* 单选按钮所在行的容器样式 */
.radio-group {
  display: flex;
  align-items: center;
  gap: 6px; /* 控制按钮与文本、多个按钮之间的间距 */
  margin: 10px 0; /* 保留上下间距，和其他表单元素统一 */
}

3. 微调间距 #

如果还是觉得控件和文本的间距不合适，直接修改上述代码里的margin或gap数值即可，比如把6px改成4px就能缩小间距，无需调整文本的边距属性。

内容的提问来源于stack exchange，提问作者britriestocode