元素竖向的百分比设定是相对于容器的高度吗？
一般而言，子元素的百分比设定都是以父元素为依据，子元素的宽度百分比依赖父元素的宽度百分比，子元素的高度百分比依赖父元素的高度百分比。那么margin ，padding这些属性也是如此吗？
不是的，举个例子.
如下代码设置了父元素的宽和高位200*100px。
之后对子元素的margin-top设置的20%。
那么这20%是200的20%还是100的20%？
一般可能觉得是100的20%。高对高嘛。然而事实并非如戏。是200的20%。证据如下，打开浏览器看看p元素的盒子。
<div class="con">
<p> this is a test</p>
</div>
<style>
.con {
width:200px;
height:100px;
background: gray;
}
p {
background : yellow;
margin-top: 20%;
}
</style>
上述代码中p的盒子如图所示.可以看出margin是40。那么显然是200*20%得来的。
image.png
如果是padding-top：20%呢？
可以看到，这个padding-top也是相对于父元素的width计算的来的。
image.png
那么padding-left呢？
image.png
哎怎么也是40呢？？
这个为啥呢？？
总结
对于竖直方向的margin和padding，参照父元素的宽度。
对于水平方向的margin和padding，也是参照父元素的宽度。
为什么这么设置？
不知道。
