Riempimento tra checkbox ed etichetta

Question

Per i guru CSS là fuori, questo markup restituisce una casella con un'etichetta Value1 alla sua destra, ma Value1 è troppo vicino alla casella di controllo.

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

Così sto cercando di creare un effetto di padding-right alla destra della casella di controllo, ma non funziona. La casella di controllo e l'etichetta si muovono insieme. Come posso scegliere come target solo la casella di controllo o il suo testo, quindi creo un intervallo di riempimento?

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

Answer 1

Utilizzare margin-right. padding si trova all'interno dell'elemento e spesso funziona in modo divertente con gli elementi di input perché sono renderizzati utilizzando i componenti di input nativi del sistema operativo e sono un disastro da personalizzare in generale.

JSFiddle here

Answer 2

n divario tra cliccabile casella ed etichetta.
Nessuna disconnessione della casella di controllo e dell'etichetta.
Nessuno spazio aggiunto per rientri di codice.
Più leggibile.

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