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

Question

我在单选按钮之间有大约 30 像素的垂直 space。将 margin-top 和 margin-bottom 设置为 0px 没有效果。我怎样才能消除垂直space？

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

Answer 1

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

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

https://jsfiddle.net/99b6pbz7/

Answer 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>

Answer 3

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

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

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

How can I get rid of radio button vertical margins?

html

css

removing-whitespace