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>