删除不可访问的垂直复选框边距

Question

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

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>

好吧，不过我需要它们内联。

space 是从哪里来的，我该如何摆脱它？

Answer 1

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

删除不可访问的垂直复选框边距

Remove inaccessible vertical checkbox margin

html

css

checkbox

margin