html - 将边距应用于复选框输入而不是其标签

Question

我正在尝试通过应用 margin-top 而不影响其标签来调整复选框输入的位置。但似乎 margin-top css 只应用于输入，它的标签也随之移动。

有没有办法只将样式应用于输入，而不是它的标签？

这是 html:

<dd id="rr-element">
  <input type="checkbox" value="1" id="rr-1" name="rr[]" />
  <label for="rr-1">
    Value 1
  </label>
</dd>

这是CSS:

dd input {
  margin-top:15px;
}

这是 fiddle

Answer 1

试试这个，使用 top 而不是 margin-top 并添加 position:relative; 到输入。

dd input{
    position:relative;
    top:15px;
}

这是工作 fiddle :http://jsfiddle.net/T86h8/481/