margin百分比的相对值--宽度！

假设一个块级包含容器，宽1000px，高600px，块级子元素定义 margin:10% 5%; 那么 margin的 top, right, bottom, left 计算值最终是多少px？

不是100px 30px 100px 30px，而是100px 50px 100px 50px！

 

结论：

 margin 的百分比值参照其包含块的宽度进行计算。

 

提示：

在w3c的规范中也是这样描述的： margin 的百分比值参照其包含块的宽度进行计算，同样的padding如果设置成百分数的话，其盒子模型和margin是一样的。

这只发生在默认的 writing-mode: horizontal-tb; 和 direction: ltr; 的情况下，当书写模式变成纵向的时候，其参照将会变成包含块的高度。

 

为什么要选择宽度做参照而不是高度呢？

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

 

 

可参考：

http://www.ituring.com.cn/article/64581

http://www.uedsc.com/discussion-margin-and-padding-values.html