Wypełnienie między polem wyboru a etykietą

Question

W tym miejscu dla znaczników CSS ten znacznik wyświetla pole wyboru z etykietą Value1 po prawej stronie, ale Value1 znajduje się zbyt blisko pola wyboru.

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

Więc staram się stworzyć padding-right wpływ na prawo do wyboru, ale to nie działa. Pole wyboru i etykieta poruszają się razem. Jak mogę kierować tylko na pole wyboru lub jego tekst, aby utworzyć odstęp?

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

Answer 1

Użyj margin-right. padding znajduje się wewnątrz elementu i często działa zabawnie z elementami wejściowymi, ponieważ są one renderowane za pomocą natywnych składników wejściowych systemu operacyjnego i ogólnie są kłopotliwe w dostosowywaniu.

JSFiddle here

Answer 2

Nie unclickable luka między polem wyboru i etykiety.
Brak rozłączania zawijania wierszy pola wyboru i etykiety.
Nie dodano żadnych spacji przez wcięcia w kodzie.
Bardziej czytelny.

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