2010-09-07 13 views
24

¿Cómo cambio el espacio entre el botón de opción y su texto?CSS: ¿Cómo cambiar el espacio entre el botón de opción y su texto?

Tengo el siguiente código HTML:

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

que produce algo parecido a este gráfico:

o 1+ o 2+ 

¿Cómo puedo cambiar el espacio entre el botón y el texto "1+"? Me gustaría que el texto sea más cercano al botón de opción, pero el navegador está insertando una cierta cantidad de relleno indefinido entre los dos elementos.

Respuesta

31

Muchos elementos HTML tienen una configuración de margen predeterminada. Puede modificar esto y ponerlo a 0. En su caso, que desea restablecer margin-right en el botón de radio:

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

Es posible que desee para añadirlo a la hoja de estilos para que se aplique a todos los botones de radio:

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

Necesitará el 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> 

continuación Puede estilo de esta así:

label { 
    margin-left: -3px; 
} 

También tenga en cuenta el uso del atributo for con fines de accesibilidad.

Cuestiones relacionadas