Remove inaccessible vertical checkbox margin

Question

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?

Answer 1

Add display: flex; and flex-direction: row to it, therefore they will be inline without vertical spacing.