如何为CSS宽高比彩色盒子添加垂直间距？

问题核心是绝对定位的h2缺少相对定位的父容器，导致外部margin会干扰它的定位基准。同时需要给盒子与下方p标签添加可控的垂直间距，具体修改如下：

1. 修正盒子与h2的定位关系 #

给正方形盒子添加position: relative，让h2的绝对定位完全基于这个盒子，不再受外部元素的margin影响：

.box-1-1 {
  background-color: $primary;
  width: 70%;
  height: 0;
  padding-bottom: 70%;
  position: relative; /* 关键：设置相对定位作为h2的定位基准 */
  margin-bottom: 1.5rem; /* 给下方p标签留出垂直间距 */
}

.boxes {
  color: $white;
  position: absolute;
  bottom: 5%; /* 调整为盒子内部的底部位置，避免超出盒子 */
  left: 1%; /* 用left代替margin-left，定位更直观 */
  margin: 0; /* 清除h2默认margin，避免偏移 */
}

2. 优化网格列的整体垂直间距 #

如果希望整个列（包括p标签下方）都有统一的垂直间距，可以给Bootstrap的col-4添加内置间距类，比如mb-4：

<div class="col-4 mb-4">
  <div class="box-1-1">
    <h2 class="boxes">RDA EXPO</h2>
  </div>
  <div>
    <p>Lorem ipsum dolor sit amet</p>
  </div>
</div>

为什么之前的方法无效？ #

• 未给.box-1-1设置position: relative时，h2的绝对定位会参照页面中最近的已定位父元素（无则为整个文档），外部容器加margin会带动定位基准移动，导致h2位置错乱。
• 给盒子加padding无效是因为盒子高度靠padding-bottom撑开，额外padding会打破70%宽高比的正方形结构。

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