元素竖向的百分比设定是相对于容器的高度吗?

元素竖向的百分比设定是相对于容器的高度吗？

一般而言，子元素的百分比设定都是以父元素为依据，子元素的宽度百分比依赖父元素的宽度百分比，子元素的高度百分比依赖父元素的高度百分比。那么margin ，padding这些属性也是如此吗？
不是的，举个例子.
如下代码设置了父元素的宽和高位200*100px。
之后对子元素的margin-top设置的20%。
那么这20%是200的20%还是100的20%？
一般可能觉得是100的20%。高对高嘛。然而事实并非如戏。是200的20%。证据如下，打开浏览器看看p元素的盒子。

 this is a test

上述代码中p的盒子如图所示.可以看出margin是40。那么显然是200*20%得来的。

image.png

如果是padding-top：20%呢？
可以看到，这个padding-top也是相对于父元素的width计算的来的。

image.png

那么padding-left呢？

image.png

哎怎么也是40呢？？
这个为啥呢？？

总结

对于竖直方向的margin和padding，参照父元素的宽度。
对于水平方向的margin和padding，也是参照父元素的宽度。

为什么这么设置？

不知道。

参考

你未必知道的CSS小知识：元素竖向的百分比设定是相对于容器的宽度，而不是高度 - 推酷