如何仅通过CSS让子元素突破父容器padding延伸至容器边缘？

给定HTML结构如下：

<main style="padding: 16px; width: 400px; border: 2px dashed gray;">
  <div style="background-color: gray;">header</div>
  <section>content</section>
</main>

需求：仅针对内部的div元素设置CSS规则，让该元素越过父容器的padding区域，完全拉伸至父容器（main）的边缘；不能写死固定偏移数值，要能自动适配父容器padding后续的调整。

首先明确：原生CSS目前没有子元素直接获取父元素非继承属性值的能力，如果严格要求完全不修改父元素任何代码、仅给div设置CSS，没有办法做到完全无基准值、100%适配父元素任意padding改动的效果。如果接受极低成本的父元素初始化配置，或者适配常规的相对单位场景，可以参考以下方案：

方案1：CSS变量方案（推荐，零硬编码适配） #

仅需要在父元素初始化时将padding值存在CSS变量中（一次配置，后续修改padding只需要改变量值，子元素不需要任何调整），就可以实现完全自动适配的效果，是工程中最常用的方案。
父元素仅需调整padding的定义方式，其余样式完全不变：

main {
  --container-padding: 16px; /* 后续改padding只改这个值即可 */
  padding: var(--container-padding);
  /* 原有width、border样式保持不变 */
}

给目标div设置如下CSS即可，完全不需要写死任何固定偏移值，自动适配父元素padding变动：

main > div {
  margin-left: calc(-1 * var(--container-padding));
  margin-right: calc(-1 * var(--container-padding));
  width: calc(100% + 2 * var(--container-padding));
}

实现原理：通过CSS变量同步父子元素的padding/偏移基准，左右负margin抵消父元素padding的缩进，宽度补上左右负margin减少的尺寸，刚好撑满父容器padding-box的宽度（也就是border内侧边缘）。

方案2：相对单位适配方案（无需修改父元素） #

如果项目中父元素的padding是统一用rem等全局相对单位设置的，可以直接给div用对应单位的负margin，不需要修改父元素，后续全局调整基准字号、统一修改间距规范时，子元素不需要单独调整：

main > div {
  /* 适配父元素padding:1rem（即默认16px）的场景 */
  margin-inline: -1rem;
  width: calc(100% + 2rem);
}

这个方案的局限是如果单独修改父元素的padding值（比如改成24px即1.5rem），子元素的偏移值需要同步调整，做不到完全自动适配，但适配统一规范的间距体系足够用。

不推荐的方案 #

网上流传的大负margin+大正padding的方案（比如margin:0 -9999px; padding:0 9999px）不建议使用，因为父元素默认overflow:visible时，元素背景会溢出父容器边框之外，必须配合父元素overflow:hidden使用，会影响父元素内部其他元素的展示（比如悬浮提示、下拉菜单会被裁剪）。

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