Padding zwischen Kontrollkästchen und Label

Question

Für die CSS-Gurus gibt dieses Markup ein Kontrollkästchen mit einem Label Value1 auf der rechten Seite, aber Value1 ist zu nah an der Checkbox.

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

Also ich versuche, eine padding-right Wirkung rechts von der Checkbox zu schaffen, aber es funktioniert nicht. Das Kontrollkästchen und die Beschriftung werden zusammen verschoben. Wie kann ich das Kontrollkästchen nur oder seinen Text nur so ausrichten, dass ich eine Auffülllücke erzeuge?

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

Answer 1

Verwenden Sie margin-right. padding ist innerhalb des Elements und wirkt oft komisch mit Eingabeelementen, weil sie unter Verwendung der nativen Eingabe-Komponenten des Betriebssystems gerendert werden.

JSFiddle here

Answer 2

Keine unclickable Lücke zwischen Checkbox und Label.
Keine Zeilenumbruch Trennung der Checkbox und Label.
Keine Leerzeichen durch Code-Einrückungen hinzugefügt.
Besser lesbar.

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