CSS: come modificare la spaziatura tra il pulsante di opzione e il suo testo?

Question

Come cambio la spaziatura tra il pulsante di opzione e il suo testo?

Ho il seguente codice HTML:

<input type="radio" name="beds" value="1" />1+ 
<input type="radio" name="beds" value="2" />2+ 

che produce qualcosa di simile a questo grafico:

o 1+ o 2+ 

Come posso cambiare la spaziatura tra il pulsante e il testo "1+"? Mi piacerebbe che il testo fosse più vicino allo al pulsante di opzione, ma il browser sta inserendo una certa informazione sul riempimento indefinito tra i due elementi.

Answer 1

Molti elementi HTML hanno un'impostazione di margine predefinita. È possibile ignorare questa e impostarlo a 0. Nel tuo caso, si desidera ripristinare margin-right sul pulsante di scelta:

<input type="radio" name="beds" value="1" style="margin-right: 0" />1+ 

Probabilmente si desidera aggiungere al tuo foglio di stile in modo che essa si applica a tutti i pulsanti di opzione:

input[type="radio"] { 
    margin-right: 0; 
} 

Answer 2

È necessario l'elemento label.

<input type="radio" name="beds" value="1" id="first" /><label for="first">1+</label> 
<input type="radio" name="beds" value="2" id="second" /><label for="second">2+</label> 

È quindi possibile lo stile presente in questo modo:

label { 
    margin-left: -3px; 
} 

noti anche l'uso dell'attributo for per motivi di accessibilità.