百分比负边距为何无法与父元素正边距抵消？

我有个技术疑问：当给父元素设置X值的margin，子元素设置-X值的margin时，为什么两者没法抵消到相同尺寸？比如下面这个百分比margin的例子：

百分比margin示例代码 #

CSS代码 #

.outer{
  height: 200px;
  background-color: red;
  margin: 0 3%;
}
.inner{
  height: 100px;
  background-color: blue;
  margin: 0 -3%;
}
.another{
  height: 100px;
  background-color: green;
  margin-top: -150px;
}

HTML代码 #

<div class="outer">
  <div class="inner"></div>
</div>
<div class="another"></div>

我原本以为它的表现会和用viewport单位（vw）的情况完全一致，对应示例如下：

viewport单位（vw）示例代码 #

CSS代码 #

.outer{
  height: 200px;
  background-color: red;
  margin: 0 3vw;
}
.inner{
  height: 100px;
  background-color: blue;
  margin: 0 -3vw;
}
.another{
  height: 100px;
  background-color: green;
  margin-top: -150px;
}

HTML代码 #

<div class="outer">
  <div class="inner"></div>
</div>
<div class="another"></div>

原因解析 #

核心问题出在百分比margin的计算基准上：

• 父元素的margin: 0 3%，这里的百分比是基于父元素的包含块宽度（比如body或者viewport的宽度）来计算的。
• 子元素的margin: 0 -3%，这里的百分比是基于父元素自身的宽度计算的——而父元素的宽度已经是包含块宽度减去左右各3%的margin后的结果，所以子元素负margin的绝对值，实际比父元素正margin的绝对值要小，自然没法抵消到和包含块同宽的效果。

而vw单位的计算基准是固定的：3vw永远是viewport宽度的3%，不管父元素有没有设置margin，子元素的-3vw刚好能抵消父元素的3vw，所以最终能达到和viewport同宽的视觉效果。

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