Padding between checkbox and label

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

Answer 2

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>