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

Question

我正在尝试调整复选框输入的位置，方法是应用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;
}

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

Answer 2

将position: relative; CSS添加到dd input并将margin-top替换为top，如下所示：

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

JSFiddle

Answer 3

试试这段代码：

{{1}}