父级DIV有内边距，如何让子级DIV宽度100%？

让子DIV宽度撑满父DIV，即使父DIV有内边距

问题描述：

当父级DIV设置了内边距（padding），如何让子级DIV的宽度仍然能够占据父级DIV的100%？

示例代码：

  
子DIV内容

解决方案：

使用负外边距（negative margin）来抵消父级DIV的内边距。 具体方法是：为子级DIV设置margin-left: -10px; 和 margin-right: -10px; (假设父级DIV的左右内边距都是10px)。

改进后的CSS代码：

div > div {
  margin-left: -10px;
  margin-right: -10px;
}

这行代码确保子DIV的左右外边距分别为-10px，正好抵消了父DIV的10px内边距，从而使子DIV的宽度达到100%。 请注意，这需要根据父DIV的实际内边距值调整负外边距的值。 更通用的方法是使用百分比，例如：

div > div {
  margin-left: calc(-1 * env(padding-left));
  margin-right: calc(-1 * env(padding-right));
}

这个方法使用calc()函数和env()函数动态计算负外边距，使其总是与父级元素的内边距相等，即使内边距的值发生变化。 这种方法更灵活，也避免了硬编码数值带来的维护问题。