How do I give spaces between the Tag Input

Question

I have a code and I need to organize a part of it, but I can’t. I need to enter a space between some input, but I don’t know how to do it.

<tr>
            <td colspan="2">
                <div id=input-atendimento>
                Emergencia<input type="radio" name="atendimento" value="emergencia">
                Urgente<input type="radio" name="atendimento" value="urgente">
                Pouco Urgente<input type="radio" name="atendimento" value="pouco_urgente" checked="checked">
                Não Urgente<input type="radio" name="atendimento"value="nao_urgente">
                </div>
            </td>
        </tr>

would like to know how to add a mirror between them

Answer 1

See the example with margin-right in all items except for the last pq there is no other element on the right.

table {
  border: 1px solid;
}
[type="radio"]:not(:last-of-type) { 
  margin-right: 20px;
}

<table>
    <tr>
        <td colspan="2">
            <div id=input-atendimento>
            Emergencia<input type="radio" name="atendimento" value="emergencia">
            Urgente<input type="radio" name="atendimento" value="urgente">
            Pouco Urgente<input type="radio" name="atendimento" value="pouco_urgente" checked="checked">
            Não Urgente<input type="radio" name="atendimento"value="nao_urgente">
            </div>
        </td>
    </tr>
</table>

Answer 2

In addition to giving you the space you want, I would go a little further to improve the code. Instead of restricting the click only on radio, you can zoom in to the text that refers to it.

For example, click on the text "Emergency" and mark your radio. Although it increases the code a little, it improves and much the user experience, mainly in mobile devices that decrease the screen size, and the user does not need to click exactly in the radio space, because clicking on its text already mark.

To do so include each text relating to radio in a label, and put a id us inputs and a for in each label pointing to the respective 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 a _ before each id to prevent possible conflicts with others idthose that may exist on the page.

The question of margin you can first remove the standard margin of the radio and set a margin of radio to the right text (20px), and use vertical-align: middle; in the label and in the 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>