如何通过CSS设置子div背景色填充父div的padding区域？

当然可以仅用CSS实现这个需求！我结合你的HTML结构（.card作为父容器，.card-body是子容器），给你几个实用的方案：

方案一：负margin + 子元素背景延伸（最推荐） #

这个方法的核心是让子元素通过负margin向外扩展，刚好覆盖父元素的padding区域，同时子元素自己设置padding来保证内部内容的排版正常。

/* 父容器：设置padding，不需要背景色 */
.card {
  padding: 20px; /* 你需要的padding大小 */
  /* 如果父容器有边框，可以保留，后续调整负margin即可 */
  /* border: 1px solid #ddd; */
}

/* 子容器：设置背景色 + 负margin覆盖父padding */
.card-body {
  background-color: #ccc; /* 你想要的灰色 */
  margin: -20px; /* 负margin值等于父容器的padding */
  padding: 20px; /* 重置内部padding，避免内容贴边缘 */
}

注意点： #

• 负margin的数值必须和父容器的padding完全一致，才能精准覆盖padding区域
• 如果父容器有边框，需要把负margin的值加上边框宽度，比如父容器边框是1px，那负margin改为 calc(-20px - 1px)，同时可以给父容器加overflow: hidden避免子元素超出的部分影响布局

方案二：用inset阴影模拟（适合子元素有独立背景的场景） #

如果子元素本身需要白色背景，只想让父padding区域显示灰色，可以用**内阴影（inset box-shadow）**来模拟：

.card {
  padding: 20px;
}

.card-body {
  background-color: #fff; /* 子元素自身的背景色 */
  box-shadow: inset 0 0 0 20px #ccc; /* 内阴影大小等于父padding */
}

这个方法的局限性是阴影属于元素内部效果，如果你需要子元素有边框，可能会和阴影冲突，所以优先推荐方案一。

适配你的HTML结构 #

你的HTML里.card-body下还有.row和.col-*这些布局元素，只要保证.card-body的padding能让内部的row/col正常排版就行，方案一的padding:20px刚好能抵消负margin带来的内容偏移，完全不影响内部布局。

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