Html 从CSS样式化复选框中删除标签顶部的额外空间

我需要一些帮助

我一直在“谷歌搜索”寻找解决方案，但我无法找到为什么我在CSS样式化复选框的每个标签上都有额外的空间

另外，我在这里还没有发现任何关于堆栈溢出的类似问题

即使使用Chrome和Firefox的开发者模式，我也看不到产生额外空间的东西（没有边距，没有填充）

<div class="row">
    <div class="col-12 col-lg-6 flex-order-1"><label class="w-100 boton-check"><input type="checkbox" name="my_buttons[]" value="1"><span class="fade-yellow-blue">Button A</span></label></div>
    <div class="col-12 col-lg-6 flex-order-3"><label class="w-100 boton-check"><input type="checkbox" name="my_buttons[]" value="2"><span class="fade-yellow-blue">Button B</span></label></div>
    <div class="col-12 col-lg-6 flex-order-5"><label class="w-100 boton-check"><input type="checkbox" name="my_buttons[]" value="3"><span class="fade-yellow-blue">Button C</span></label></div>
    <div class="col-12 col-lg-6 flex-order-7"><label class="w-100 boton-check"><input type="checkbox" name="my_buttons[]" value="4"><span class="fade-yellow-blue">Button D</span></label></div>
    <div class="col-12 col-lg-6 flex-order-9"><label class="w-100 boton-check"><input type="checkbox" name="my_buttons[]" value="5"><span class="fade-yellow-blue">Button E</span></label></div>
    <div class="col-12 col-lg-6 flex-order-11"><label class="w-100 boton-check"><input type="checkbox" name="my_buttons[]" value="6"><span class="fade-yellow-blue">Button F</span></label></div>
    <div class="col-12 col-lg-6 flex-order-13"><label class="w-100 boton-check"><input type="checkbox" name="my_buttons[]" value="7"><span class="fade-yellow-blue">Button G</span></label></div>
    <div class="col-12 col-lg-6 flex-order-2"><label class="w-100 boton-check"><input type="checkbox" name="my_buttons[]" value="8"><span class="fade-yellow-blue">Button H</span></label></div>
    <div class="col-12 col-lg-6 flex-order-4"><label class="w-100 boton-check"><input type="checkbox" name="my_buttons[]" value="9"><span class="fade-yellow-blue">Button I</span></label></div>
    <div class="col-12 col-lg-6 flex-order-6"><label class="w-100 boton-check"><input type="checkbox" name="my_buttons[]" value="10"><span class="fade-yellow-blue">Button J</span></label></div>
    <div class="col-12 col-lg-6 flex-order-8"><label class="w-100 boton-check"><input type="checkbox" name="my_buttons[]" value="11"><span class="fade-yellow-blue">Button K</span></label></div>
    <div class="col-12 col-lg-6 flex-order-10"><label class="w-100 boton-check"><input type="checkbox" name="my_buttons[]" value="12"><span class="fade-yellow-blue">Button L</span></label></div>
    <div class="col-12 col-lg-6 flex-order-12"><label class="w-100 boton-check"><input type="checkbox" name="my_buttons[]" value="13"><span class="fade-yellow-blue">Button M</span></label></div>
</div>

按钮A
按钮B
按钮C
按钮D
按钮E
按钮F
按钮G
按钮H
按钮一
按钮J
按钮K
按钮L
按钮M

在这里，您可以看到每个按钮上的额外空间：

---

如果我添加一条规则“边距顶部：-1.5rem”，它们会到达所需的位置，但标签在复选框之间重叠：

在

上放置一个
显示：none
。boton检查输入

另一个选项是调整

上的内容。boton检查输入

以包括

位置：绝对


关于隐藏元素的一个很好的解释：
谢谢Jennifer，我以w3schools的一段代码为例，将复选框样式设置为switch（），他们使用：/*隐藏默认HTML复选框*/.切换输入{不透明度：0；宽度：0；高度：0；}这就是为什么我认为它可以，但我从未选中它。