如何为Bootstrap v5全屏高宽COL内内容添加margin并保持布局对齐

我设置了两行布局，每行包含2个col，希望为黄色区块添加margin，同时让其占据col中除去margin后的所有可用空间，但目前添加margin后黄色内容完全错位。

当前效果：

期望效果：

问题：是否可以通过为黄色区块添加margin来实现该效果？
注意：我知道可以为col添加padding实现类似效果，但这不符合我的实际业务场景。

当前代码 #

CSS #

.row {
  background: green;
}

.col {
  background: red;
  border: 1px solid blue;
  height: 60px;
}

.content-margin {
  margin: 10px;
  background: yellow;
}

HTML #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-6">
      <div class="content-margin  w-100 h-100  d-flex"></div>
    </div>
    <div class="col col-lg-6">
      <div class="content-margin w-100 h-100  d-flex"></div>
    </div>
  </div>
  <div class="row justify-content-md-center">
    <div class="col col-lg-6">
      <div class="content-margin  w-100 h-100  d-flex"></div>
    </div>
    <div class="col col-lg-6">
      <div class="content-margin  w-100 h-100 d-flex"></div>
    </div>
  </div>
</div>

解决方案 #

可以实现，以下是两种直接针对黄色区块调整的可行方案：

方案1：用calc()手动计算尺寸 #

默认盒模型中，w-100/h-100的宽度高度是100%，加上margin会超出父容器导致错位。我们可以通过calc()减去margin的总间距，让黄色区块刚好填满父容器剩余空间：
修改.content-margin的CSS：

.content-margin {
  margin: 10px;
  background: yellow;
  width: calc(100% - 20px); /* 左右margin各10px，总需减去20px */
  height: calc(100% - 20px); /* 上下margin各10px，总需减去20px */
}

同时可以移除HTML中黄色区块的w-100 h-100类，避免样式冲突。

方案2：利用Flex布局自动适配 #

给父元素col添加d-flex类，将其转为Flex容器，再给黄色区块添加flex-grow-1类，让它自动占据容器内除去margin后的所有可用空间：

1. 修改HTML中col的结构：

<div class="col col-lg-6 d-flex">
  <div class="content-margin flex-grow-1"></div>
</div>

2. 简化.content-margin的CSS（可去掉w-100 h-100）：

.content-margin {
  margin: 10px;
  background: yellow;
}

这种方式更贴合Bootstrap的布局逻辑，无需手动计算尺寸，Flex容器会自动处理空间分配。

两种方案都能实现你要的效果，且不需要给col添加padding。

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