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中的例子

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

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

外边距合并

外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：

以及给子元素一个margin-top时会出现塌陷到父元素

外边距塌陷问题使父元素为BFC(块级格式化上下文)

把父级元素设置成块级格式化上下问的方法是：

1、float值不为none

2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible

inline-black在不设置宽度的情况下默认不继承父元素的宽度，而black在不设置宽度的情况下默认继承父元素的宽度