css百分比margin

先写一个定宽高div在里面放个p元素

<div class="container">
    <p>这是文字部分<p>
</div>

<style>
body {
  background: #e9e9e9;
}
.container {
  width: 1000px;
  height: 600px;
}

.container p {
  margin: 10% 5%;
  background: #555;
}
</style>

 效果如下

是不是感觉有点不对劲，没错，左右为什么是50px而不是30px

50 ÷ 1000 = 5%；

没错，百分比参照的就是其父级元素的宽度，无论是margin-top/bottom/left/right

那么问题来，可不可以让他参照父级的高度呢

那答案肯定是可以的

在原来的css中加上

.container {
  width: 1000px;
  height: 600px;
  -webkit-writing-mode: vertical-rl; /* for browsers of webkit engine */
  writing-mode: tb-rl; /* for ie */
}

这样就改好了

扫描二维码关注公众号，回复： 5639418 查看本文章

吗？

你发现，文字也变了

是的，这个确实可以改变margin的参照，不过文字的排列模式也发生了改变

这个百分比参考原理同样作用于padding

---

最后引用下原文的话吧，我也没思考那么多

你是否觉得这不符合常规的感性认知？感性认知更多感觉应该横向参照包含块宽度，纵向参照包含块高度。

其实这是为了要横向和纵向2个方向都创建相同的margin，如果它们的参照物不一致，那就无法得到两个方向相同的留白。

你可能会问那为什么要选择宽度做参照而不是高度呢？

这其实更多的要从CSS设计意图上去想，因为CSS的基础需求是排版，而通常我们所见的横排文字，其水平宽度一定（仔细回想一下，如果没有显式的定义宽度或者强制一行显示，都会遇到边界换行，而不是水平延展），垂直方向可以无限延展。但当书写模式为纵向时，其参照就变成了高度而不再是宽度了。

还记得我们在 margin系列之keyword auto 留了个问题：为什么 margin: auto; 无法再纵向上垂直居中？其实原因也是上面所说的，因为纵向是可以无限延展的，所以没有一个一定的值可以被参照被用来计算。