如何在我的单选按钮之间添加 space？ (HTML)

Question

我目前有 3 个性别单选按钮，但它们彼此靠得太近，我希望一个单选按钮和另一个单选按钮的文本之间有足够的间隙。

.radio {
  font-size: 24px;
  font-weight: 500;
  display: inline-block;
  vertical-align: middle;
  color: white;
  position: relative;
  margin-left: 100px;
}

.radio-group {
  color: white;
  padding-left: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.radio input[type="radio"] {
  display: none;
  color: white;
  margin: 0 10px 0 10px;
}

.radio span {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border: 1px solid white;
  margin-left: 100px;
}

<label class="label control - label">Gender</label>
<div class="radio-group">
  <label>
       <input type="radio" name="gender" value = "male"/>
       Male
       <span></span>
 </label>
  <label>
       <input type="radio" name="gender" value = "female"/>
       Female
       <span></span>
  </label>
  <label>
       <input type="radio" name="gender" value = "Other"/>
       Other
       <span></span>
  </label>
</div>

我尝试了 margins 和 padding，并查看了一些其他非常相似的堆栈问题，但由于某种原因它们似乎并没有真正起作用，我该怎么办？

Answer 1

那个？（与 css ::after）

.radio-group {
  padding-left: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
}
.radio-group label::after {
  content:'[=10=]a0[=10=]a0[=10=]a0[=10=]a0'; /* eq &nbsp; x 4 */
}

/* optionnal */
.radio-group label:last-of-type::after {
  content:'';
}

<label class="label control - label">Gender</label>
<div class="radio-group">
  <label>
    <input type="radio" name="gender" value="male">
    Male
  </label>
  <label>
    <input type="radio" name="gender" value="female">
    Female
  </label>
  <label>
    <input type="radio" name="gender" value="Other">
    Other
  </label>
</div>

如何在我的单选按钮之间添加 space？ (HTML)

How do I add space between my radio buttons? (HTML)

html

css

radio-button