CSS 中 margin 与 padding 的百分比

最近做开发的时候用到了多次 margin: xx% 来做自适应的网页布局，但这个东西有时候出来的结果并不是自己所想的，于是去百度了一下这个百分比的计算基准，结果发现了一个比较好玩的点。

示例HTML

<div class="boxer">
  <div class="box"></div>
</div>

示例CSS

.boxer {
  width: 600px;
  height: 400px;
  background: red;
}
.box {
  width: 200px;
  height: 100px;
  background: blue;
  // padding: 10%; //padding 和 margin 一样好玩
  margin: 10%;
}

猜测结果

.box 的 margin 为：40px 60px 40px 60px

结果

是的结果是 60px 60px 60px 60px，同样 padding 也是一致。

why

w3c就是这么规定的。

margin - CSS | MDN