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%;
}

猜测结果

.boxmargin 为:40px 60px 40px 60px

结果

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

why

w3c就是这么规定的。

margin - CSS | MDN

 标签: CSS, 前端开发

作者  :  sailor

一个头脑简单的家伙。



关于我

about me

sailor

一个头脑简单的家伙。

联系我

最新文章