In addition to giving you the space you want, I'd go a little further to improve the code. Instead of restricting the click only on radio
, you can zoom in on the text that refers to it.
For example, click on the text "Emergency" and mark your radio
. Although it slightly increases the code, it improves and much the user experience, especially in mobile devices that decrease the size of the screen, and the user does not need to click exactly in the space of the radio, because clicking on your text already marks it. p>
To do this, include each text referring to radio
in a label
, and place a id
in input
if a for
in each label
pointing to its id
:
<label for="_emergencia">Emergencia</label>
<input id="_emergencia" type="radio" name="atendimento" value="emergencia">
<label for="_urgente">Urgente</label>
<input id="_urgente" type="radio" name="atendimento" value="urgente">
<label for="_pouco_urgente">Pouco Urgente</label>
<input id="_pouco_urgente" type="radio" name="atendimento" value="pouco_urgente" checked="checked">
<label for="_nao_urgente">Não Urgente</label>
<input id="_nao_urgente" type="radio" name="atendimento"value="nao_urgente">
I put _
before every id
to prevent possible conflicts with other id
s that might exist on the page.
The margin question you can first remove the default margin from radio
and set a margin from radio
to the text on the right ( 20px
), and use vertical-align: middle;
on label
and input
to align them in half with each other.
#input-atendimento label,
#input-atendimento input{
vertical-align: middle;
margin: 0;
}
#input-atendimento input{
margin-right: 20px;
}
Example:
#input-atendimento label,
#input-atendimento input{
vertical-align: middle;
margin: 0;
}
#input-atendimento input{
margin-right: 20px;
}
table {
border: 1px solid;
}
Clique no texto em vez de clicar diretamente no radio:
<table>
<tr>
<td colspan="2">
<div id=input-atendimento>
<label for="_emergencia">Emergencia</label>
<input id="_emergencia" type="radio" name="atendimento" value="emergencia">
<label for="_urgente">Urgente</label>
<input id="_urgente" type="radio" name="atendimento" value="urgente">
<label for="_pouco_urgente">Pouco Urgente</label>
<input id="_pouco_urgente" type="radio" name="atendimento" value="pouco_urgente" checked="checked">
<label for="_nao_urgente">Não Urgente</label>
<input id="_nao_urgente" type="radio" name="atendimento" value="nao_urgente">
</div>
</td>
</tr>
</table>