删除无法访问的垂直复选框边距

Question

我正在尝试创建一个复选框网格。 因此，我试图删除它们之间的所有空格，但背景中似乎有一些我无法控制的垂直边距或行高：

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>

但我知道它必须是可能的，因为使用display: block，垂直边距消失了。

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>

好吧，我需要它们内联。

空间来自哪里，我该如何摆脱它？

Answer 1

将display: flex; 和flex-direction: row 添加到其中，因此它们将是内联的，没有垂直间距。