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

一般情况下，子元素的百分比单位都是以父元素为依据。 但是外边距 (margin)，内边距(padding)除外。 举例子，如图代码，设置父元素宽200像素，高100像素。

然后，让子元素设置顶部外边距20%，一般可能觉得父元素100高度乘以20%等于20像素，高对应高嘛，所以margin-top: 20%;可以转化为margin-top: 20px;

但是，这是错的，我们按F12打开游览器控制台，查看span子元素真实属性，发现是40像素，而这个结果是20%乘以父元素的宽度200像素得来的。

改成padding也是基于父元素的宽度

上下左右边距也是根据父元素的宽度

总结：竖直方向和水平方向的margin和padding，都是参照父元素的宽度。