如何摆脱单选按钮的垂直边距？答案

【问题标题】：How can I get rid of radio button vertical margins?如何摆脱单选按钮的垂直边距？
【发布时间】：2018-04-01 20:54:35
【问题描述】：

单选按钮之间有大约 30 像素的垂直空间。将margin-top 和margin-bottom 设置为0px 无效。如何消除垂直空间？

body {
  margin: 2em;
  font-family: Arial, Helvetica, sans-serif;
}

input[type="radio"] {
  opacity: 0;
}

input[type="radio"]+label {
  cursor: pointer;
  border: 1px solid #ccc;
  background: #efefef;
  color: #aaa;
  border-radius: 3px;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0);
  display: block;
  width: 200px;
  height: 40px;
  padding-left: 20px;
  margin-top: 0px;
  margin-bottom: 0px;
}

input[type="radio"]:checked+label {
  background: #777;
  border: 1px solid #444;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
  color: white;
  margin-top: 0px;
  margin-bottom: 0px;
}

<input id="Radio1" name="Radios" type="radio">
<label for="Radio1">I am option1</label>
<input id="Radio2" name="Radios" type="radio" value="Option 2">
<label for="Radio2">I am option2</label>
<input id="Radio3" name="Radios" type="radio" value="Option 3">
<label for="Radio3">I am option3</label>

View on JSFiddle

【问题讨论】：

标签： html css removing-whitespace

【解决方案1】：

只需隐藏实际的单选按钮。

input[type="radio"] {
  display: none;
}

【讨论】：

【解决方案2】：

将其从流程中移除（绝对） https://jsfiddle.net/0d227oj6/1/

body {
  margin: 2em;
  font-family: Arial, Helvetica, sans-serif;
}

input[type="radio"] {
  opacity: 0;
  position:absolute;/* removed from the flow */
}

input[type="radio"]+label {
  cursor: pointer;
  border: 1px solid #ccc;
  background: #efefef;
  color: #aaa;
  border-radius: 3px;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0);
  display: block;
  width: 200px;
  height: 40px;
  padding-left: 20px;
  margin-top: 0px;
  margin-bottom: 0px;
}

input[type="radio"]:checked+label {
  background: #777;
  border: 1px solid #444;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
  color: white;
  margin-top: 0px;
  margin-bottom: 0px;
}

<input id="Radio1" name="Radios" type="radio">
<label for="Radio1">I am option1</label>
<input id="Radio2" name="Radios" type="radio" value="Option 2">
<label for="Radio2">I am option2</label>
<input id="Radio3" name="Radios" type="radio" value="Option 3">
<label for="Radio3">I am option3</label>

【讨论】：

【解决方案3】：

如果您的意图是隐藏单选按钮本身并只显示标签，则只需应用 position: absolute 将它们从页面流中删除：

input[type="radio"] {
    opacity: 0;
    position: absolute;
}

https://jsfiddle.net/99b6pbz7/

【讨论】：