form css radio/checkbox valign test

different approaches to neatly aligning radiobuttons and checkboxes next to text. two vertical-align:middle; elements next to eachother seem to produce the best results and independent of fontsize.

by Laurens Maneschijn

HTML

<form>
  <label><input type="checkbox"> klik default</label>
  <label><input type="checkbox" class="baseline"> klik baseline</label>
  <label><input type="checkbox" class="vmid"> klik vmid</label>
  <label><input type="checkbox" class="vmid"> <span class="vmid">klik vmid-vmid</span></label>
  <label><input type="radio"> klik default</label>
  <label><input type="radio" class="baseline"> klik baseline</label>
  <label><input type="radio" class="vmid"> klik vmid</label>
  <label><input type="radio" class="vmid"> <span class="vmid">klik vmid-vmid</span></label>
</form>
<hr>
<form style="font-size:32px;">
  <label><input type="checkbox"> klik default</label>
  <label><input type="checkbox" class="baseline"> klik baseline</label>
  <label><input type="checkbox" class="vmid"> klik vmid</label>
  <label><input type="checkbox" class="vmid"> <span class="vmid">klik vmid-vmid</span></label>
  <label><input type="radio"> klik default</label>
  <label><input type="radio" class="baseline"> klik baseline</label>
  <label><input type="radio" class="vmid"> klik vmid</label>
  <label><input type="radio" class="vmid"> <span class="vmid">klik vmid-vmid</span></label>
</form>

<p>
  different approaches to neatly aligning radiobuttons and checkboxes next to text.<br>
  two vertical-align:middle; elements next to eachother seem to produce the best results  and independent of fontsize.<br>
</p>

CSS

label {
    display: block;
    border: 1px dotted red;
}
input.vmid[type="radio"],
input.vmid[type="checkbox"]{
    margin-top: 0px;
    margin-bottom: 1px;
    vertical-align: middle;
}
input.baseline[type="radio"],
input.baseline[type="checkbox"]{
    margin-top: 0px;
    margin-bottom: 0px;
    vertical-align: baseline;
    position: relative;
    top: 1px;
}
span.vmid{
  display:inline-block;
  vertical-align: middle;
}