samedi 27 novembre 2021

Remove inaccessible vertical checkbox margin

I am trying to create a grid of checkboxes. Therefore I am trying to remove all whitespaces between them, but there seem to be some vertical margins or line heights in the background that I cannot control:

input[type=checkbox] {
  display: inline-block;
  margin: 0;
}
<div><input type="checkbox"><input type="checkbox"><input type="checkbox"></div>
<div><input type="checkbox"><input type="checkbox"><input type="checkbox"></div>
<div><input type="checkbox"><input type="checkbox"><input type="checkbox"></div>

But I know it has to be possible, since, with display: block, the vertical margin is gone.

input[type=checkbox] {
  display: block;
  margin: 0;
}
<div><input type="checkbox"><input type="checkbox"><input type="checkbox"></div>
<div><input type="checkbox"><input type="checkbox"><input type="checkbox"></div>
<div><input type="checkbox"><input type="checkbox"><input type="checkbox"></div>
well, I need them inline though.

Where is the space coming from and how can I get rid of it?




Aucun commentaire:

Enregistrer un commentaire