1

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?

Basti
  • 606
  • 1
  • 12
  • 22

1 Answers1

1

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

Felix Haeberle
  • 1,530
  • 12
  • 19
  • `display: flex` for the divs solved it, `flex-direction: row` is default behaviour. Do you know why that works and what is happening internally? – Basti Nov 27 '21 at 23:17
  • You can read more about it here: https://stackoverflow.com/a/5078297 – Felix Haeberle Nov 27 '21 at 23:30
  • almost, the solution is the same, but the problem and explanation are different (horizontal vs vertical). The user is havin problems with horizontal spaces, that can be solved by removing the new lines between the elements. This explains where it is coming from, but it seems not to be the same root cause here. The font-size trick, also seems to work though... so it is highly related but not the same somehow. – Basti Nov 27 '21 at 23:53
  • 1
    anyway, inline block styling feels kind of old, useless and obtrusive when you have much better options like flexbox or grid, I would definitely go for them. – Felix Haeberle Nov 28 '21 at 00:25
  • That sounds like a good argument, thanks for your help and effort! – Basti Nov 29 '21 at 08:49