padding，margin百分比 详解及内外边距问题

今天早晨被同时问及一个面试的题；说一个盒子给定宽度为500px，而padding-top为20%，则盒子的高度是多少，瞬间蒙了：然后去测试了下，正好今天离职没啥事认真研究下边距问题

首先说一下padding-top，padding-bottom，margin-top，margin-bottom为百分比时是相对与父元素的

w3school规定

内边距的百分比数值

前面提到过，可以为元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的，这一点与外边距一样。所以，如果父元素的 width 改变，它们也会改变。

下面这条规则把段落的内边距设置为父元素 width 的 10%：

p {padding: 10%;}

还可以为 margin 设置一个百分比数值：

p {margin : 10%;}

百分数是相对于父元素的 width 计算的。上面这个例子为 p 元素设置的外边距是其父元素的 width 的 10%。

说到外边距边距会出现边距塌陷问题：同时引用w3school中的例子

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的