Além de dar o espaço que deseja, eu iria um pouco além para melhorar o código. Em vez de restringir o click apenas no radio
, você pode ampliar para o texto que se refere a ele.
Por exemplo, clicar no texto "Emergência" e marcar o seu radio
. Apesar de aumentar um pouco o código, melhora e muito a experiência do usuário, principalmente em dispositivos móveis que diminuem o tamanho da tela, e o usuário não precisa clicar exatamente no espacinho do radio, pois clicando no seu texto já o marca.
Para isso inclua cada texto referente ao radio
em um label
, e coloque um id
nos input
s e um for
em cada label
apontando para o respectivo 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">
Coloquei um _
antes de cada id
para previnir possíveis conflitos com outras id
s que possam existir na página.
A questão da margem você pode primeiramente retirar a margem padrão do radio
e setar uma margem do radio
para o texto à direita (20px
), e usar vertical-align: middle;
no label
e no input
para alinhá-los ao meio um com o outro.
#input-atendimento label,
#input-atendimento input{
vertical-align: middle;
margin: 0;
}
#input-atendimento input{
margin-right: 20px;
}
Exemplo:
#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>
#input-atendimento input{ margin-right: 20px; }