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

Question

我需要一些帮助。

我一直在“谷歌搜索”找到一个解决方案，但我无法找到为什么我在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>

在这里，您可以看到每个按钮上的额外空间：https://codepen.io/herni_hdez/pen/Erqvpb

如果我添加一个规则“margin-top：-1.5rem”，它们会转到所需的位置，但标签在复选框之间重叠：https://codepen.io/herni_hdez/pen/bzXrxN

Answer 1

把display:none放在你的.boton-check input上。

https://codepen.io/jgoncalves/pen/MLNEVG

另一个选择是调整.boton-check input上的内容以包含position: absolute;。

https://codepen.io/jgoncalves/pen/bzXYNa

关于隐藏元素的一个很好的解释：https://allyjs.io/tutorials/hiding-elements.html