Tailwind Flex布局中首个子元素高度为何大于其他元素？

问题分析 #

你的代码里，父容器用了space-y-10类实现垂直间距，但这个类是靠给非首个子元素添加margin-top来生效的。在flex-wrap布局场景下，这种基于margin的间距方案不仅容易造成视觉上的高度误解，还可能干扰元素的高度计算逻辑，导致你看到首个子元素高度异常的情况。

解决方案 #

把父容器的space-y-10替换为flex布局原生的gap-y-10（如果需要同时设置水平间距，直接用gap-10即可）。gap是flex布局的标准间距属性，不会给子元素添加额外margin，能从根源上确保所有子元素高度完全一致。

修改后的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <div class="flex flex-wrap p-6 bg-gray-200 gap-y-10">
      <div class="bg-blue-500 text-white p-4 rounded w-1/3 text-center">
        Child 1
      </div>
      <div class="bg-green-500 text-white p-4 rounded w-1/3 text-center">
        Child 2
      </div>
      <div class="bg-red-500 text-white p-4 rounded w-1/3 text-center">
        Child 3
      </div>
      <div class="bg-purple-500 text-white p-4 rounded w-1/3 text-center">
        Child 4
      </div>
      <div class="bg-teal-500 text-white p-4 rounded w-1/3 text-center">
        Child 5
      </div>
      <div class="bg-yellow-500 text-white p-4 rounded w-1/3 text-center">
        Child 6
      </div>
    </div>
  </body>
</html>

额外说明 #

• 若需要同时设置子元素的水平间距，将gap-y-10改为gap-10即可，该类会同时控制水平和垂直方向的间距。
• 如果你一定要使用space-y类，也可以给所有子元素添加h-full类强制高度统一，但这种方案不如gap简洁可靠。

内容的提问来源于stack exchange，提问作者Mg Bhadurudeen