如何忽略父div的padding 让内部图片撑满外层main-div容器

你使用负margin未生效的核心原因是：.inner-img原有规则max-width: 100%的百分比取值，是相对于父元素inner-div的内容宽度（即外层500px减去左右20px padding后的460px）计算的。仅设置负margin不会改变图片本身的宽度，460px宽的图片即使左移20px，右侧还是会有20px的空缺，没法撑满外层容器。

调整.inner-img的CSS规则即可：

.inner-img {
  /* 左右负margin抵消父容器的padding，让图片左右边界对齐外层容器 */
  margin: 0 -20px;
  /* 宽度 = 父容器内容宽度 + 左右padding总和，刚好填满外层main-div */
  width: calc(100% + 40px);
  /* 取消原有max-width限制，避免宽度被截断 */
  max-width: unset;
}

该方案兼容所有现代浏览器，且不需要修改HTML结构，inner-div内的p标签等其他内容仍会保留原有20px的缩进，符合常规排版需求。

如果你的main-div宽度是固定的500px，也可以用相对定位实现：

.inner-img {
  position: relative;
  left: -20px;
  width: 500px;
  max-width: unset;
}

该方案缺点是main-div宽度调整时需要同步修改图片宽度，灵活性较低。

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