Question

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>

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;
}

Answer 1

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 here