如何消除React+TailwindCSS表单中CSS Grid的意外间隙？

• 正在使用React和TailwindCSS制作表单

以下是我的代码。
(gap-y-12px => 这是我的自定义Tailwind配置)

<div class="grid grid-cols-3 gap-y-12px gap-x-20px">
   <div class="wrapper">
      <div class="om-checkbox "><input id="domestic" type="radio" name="domestic"><label for="domestic" class="om-checkbox__label">Love</label></div>
   </div>
   <div class="wrapper">
      <div class="om-checkbox "><input id="foreign" type="radio" name="foreign"><label for="foreign" class="om-checkbox__label">Friend</label></div>
   </div>
   <div class="wrapper">
      <div class="om-checkbox "><input id="both" type="radio" name="both"><label for="both" class="om-checkbox__label">KiWi</label></div>
   </div>
   <div class="wrapper">
      <div class="om-checkbox "><input id="none" type="radio" name="none"><label for="none" class="om-checkbox__label">Orange</label></div>
   </div>
   <div class="wrapper">
      <div class="om-checkbox "><input id="other" type="radio" name="other"><label for="other" class="om-checkbox__label">HAHAHA</label></div>
   </div>
</div>

如何消除.om-checkbox中的意外间隙？
(我不想通过嵌套div来生成两行)

解决方法 #

1. 利用Flex布局消除间隙
   给.om-checkbox添加Flex布局属性，直接消除内联元素的默认空白间隙，还能让单选框和文字对齐：

   .om-checkbox {
     display: flex;
     align-items: center;
     gap: 4px; /* 可选，自定义单选框和文字的间距 */
   }
   

   或者直接用Tailwind的类替代自定义CSS：

   <div class="om-checkbox flex items-center gap-1">...</div>
   

2. 清除内联元素默认字体间距
   内联元素的间隙来自浏览器默认的字体空白，给.om-checkbox设置font-size: 0，再给标签恢复字体大小：

   .om-checkbox {
     font-size: 0;
   }
   .om-checkbox__label {
     font-size: 1rem; /* 按需求调整字体大小 */
   }
   

另外提醒：当前所有单选框的name属性各不相同，这样用户可以同时选中多个选项，不符合单选逻辑，应该把所有单选框的name设为同一个值，比如relation。

内容的提问来源于stack exchange，提问作者Byeongin Yoon