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

我试图通过应用边距顶部而不影响其标签来调整复选框输入的位置。但是，似乎空白边距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

最佳答案

尝试使用此方法，使用top代替margin-top并在输入中添加position:relative;。

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

这是工作提琴：http://jsfiddle.net/T86h8/481/