CSS问题：如何避免flex-row因子元素margin导致高度被撑开？

问题重现 #

使用以下Tailwind代码时，flex容器会因子元素的m-5属性导致高度被额外撑开：

<div class="flex flex-row bg-blue-100 box-border">
  <p class="bg-red-100 m-5">
    test1
  </p>
  <p class="bg-red-100 m-5">
    test2
  </p>
</div>

当前效果：容器高度超出子元素本身，上下存在额外空白；期望效果：容器高度与子元素高度一致，无多余上下空白。

解决方案 #

方案1：用容器Padding + Gap替代子元素全Margin #

通过给容器设置上下padding，用flex的gap属性控制子元素间的水平间距，同时移除子元素的全margin：

<div class="flex flex-row bg-blue-100 p-5 gap-10">
  <p class="bg-red-100">test1</p>
  <p class="bg-red-100">test2</p>
</div>

• 原理：容器的p-5负责提供子元素与容器边缘的上下间距，gap-10对应原两个子元素左右margin之和（5+5），彻底避免子元素margin撑开容器高度。
• 适用场景：希望子元素与容器边缘保持均匀间距，同时子元素间有固定间隔。

方案2：移除子元素上下Margin，保留水平Margin #

如果仅需要子元素间有水平分隔，直接去掉子元素的上下margin，只保留左右margin：

<div class="flex flex-row bg-blue-100">
  <p class="bg-red-100 mx-5 my-0">test1</p>
  <p class="bg-red-100 mx-5 my-0">test2</p>
</div>

• 原理：子元素仅保留水平margin，不会影响容器的垂直高度，容器高度将与子元素自身高度完全一致。
• 适用场景：不需要子元素与容器上下边缘有间距，仅需子元素间水平分隔。

方案3：给容器设置负Margin抵消子元素Margin（需配合父容器溢出隐藏） #

如果必须保留子元素的全margin设置，可给容器设置与子元素margin值相反的负margin，同时给容器的父元素添加overflow-hidden避免内容溢出：

<!-- 父容器 -->
<div class="overflow-hidden">
  <div class="flex flex-row bg-blue-100 box-border -m-5">
    <p class="bg-red-100 m-5">test1</p>
    <p class="bg-red-100 m-5">test2</p>
  </div>
</div>

• 原理：容器的负margin抵消子元素margin对容器高度的撑开效果，父容器的overflow-hidden确保容器不会超出可视范围。
• 适用场景：必须保留子元素全margin设置，且允许父容器限制溢出内容。

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