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

Posted 2023-03-06

【中文标题】删除无法访问的垂直复选框边距

【英文标题】：Remove inaccessible vertical checkbox margin

【发布时间】：2022-01-05 09:24:04

【问题描述】：

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

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>

好吧，我需要它们内联。

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

【参考方案1】：

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

【讨论】：

display: flex 为 div 解决了它，flex-direction: row 是默认行为。您知道为什么会这样以及内部发生了什么吗？

您可以在这里阅读更多信息：***.com/a/5078297

差不多，解法是一样的，只是问题和解释不一样（横向vs纵向）。用户遇到水平空间问题，可以通过删除元素之间的新线来解决。这解释了它的来源，但这似乎不是相同的根本原因。字体大小的技巧，虽然似乎也有效......所以它是高度相关的，但不知何故不一样。

无论如何，当您有更好的选择（如 flexbox 或网格）时，内联块样式感觉有点陈旧、无用和突兀，我肯定会选择它们。

这听起来不错，感谢您的帮助和努力！