Padding between checkbox and label

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

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

No unclickable gap between checkbox and label.
No line wrap disconnection of the checkbox and label.
No spaces added by code indentations.
More readable.

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

<style>
#rr-element {
    white-space: nowrap;
}

#rr-element label {
   padding-left: 0.4em;
}
</style>