复选框和标签之间的填充 [英] Padding between checkbox and label

问题描述

对于那里的CSS gurus，此标记输出一个复选框，其右侧有一个标签 Value1 ，但 Value1 太靠近复选框。

For the CSS gurus out there, this markup outputs a checkbox with a label Value1 to its right, but Value1 is too close to the checkbox.

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

所以我试图创建一个 padding-right 效果在复选框的右侧，但它不工作。复选框和标签一起移动。我如何仅定位复选框或其文本，以便我创建一个填充间隙？

So I'm trying to create a padding-right effect to the right of the checkbox, but it's not working. The checkbox and label move together. How can I target the checkbox only or its text only so I create a padding gap?

dd label input {
   padding-right:100px;
}

推荐答案

使用 margin-right 。 padding 是在元素内部，并且通常对输入元素很有趣，因为它们是使用操作系统的原生输入组件渲染的，并且是一般的自定义混乱。

Use margin-right. padding is inside the element, and often acts funny with input elements because they are rendered using the OS's native input components, and are a mess to customize in general.

JSFiddle 这里

JSFiddle here

这篇关于复选框和标签之间的填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！