如何在Bootstrap 4中结合Flexbox实现外边距折叠？

你遇到的这个问题其实是Flex布局的特性导致的——CSS规范里明确规定，Flex容器的子元素之间，外边距是不会发生折叠的，这和传统块级元素的布局逻辑不一样。你这里的.row是Flex容器，里面的.test-element.col-12和.button-block都是它的Flex子元素，所以它们的margin-bottom:50px和margin-top:50px会直接叠加，最终变成100px的间距，这就是为啥和你的预期不符。

下面给你几个实用的解决方案，按需选择：

• 方案1：只保留一个元素的外边距（最推荐）
  最简单直接的办法，就是去掉其中一个元素的外边距，只给列设置margin-bottom:50px，或者只给按钮块设置margin-top:50px。这样两者之间的间距就正好是50px，完全符合你的需求。比如修改样式：

  .test-block { 
      background: #FFDC00; 
      border: 1px solid #111; 
      margin-bottom: 50px; /* 保留这个外边距 */
      text-align: center; 
  } 
  .button-block { 
      /* 去掉这个margin-top */
      /* margin-top: 50px; */
      display: flex; 
      flex-direction: column; 
      color: white; 
  }
  

  反过来操作（保留按钮块的margin-top，去掉列的margin-bottom）效果完全一样，选哪种都可以。

• 方案2：用Bootstrap内置间距类替代自定义样式
  Bootstrap本身提供了一套现成的间距工具类，比如mb-5对应margin-bottom: 3rem（如果你的默认字体是16px，3rem就是48px，接近50px；要是需要精确的50px，你可以自定义一个类，比如.mb-50 { margin-bottom: 50px; }）。直接给元素加对应的类，既符合Bootstrap的使用习惯，还能避免自定义样式的冲突问题。

• 方案3：调整布局结构，利用块级元素的外边距折叠
  如果你一定要依赖外边距折叠的特性，可以把.button-block从.row这个Flex容器里移出来，让它和.row（默认是块级元素）处于同一个块级上下文里。此时两者的外边距就会自动折叠，最终间距变成50px。比如调整HTML结构：

  <div class="row">
    <div class="test-element col-12 test-block">你的列内容</div>
  </div>
  <div class="button-block">你的按钮内容</div>
  

  不过这个方法可能会影响整体布局，需要根据你的实际页面结构来判断是否适用。

总的来说，方案1是最省心的，因为Flex布局下本来就不依赖外边距折叠，直接控制单个元素的外边距不仅直观，还不容易出现意外的布局问题。

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