今天早晨被同時問及一個面試的題；說一個盒子給定寬度為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在不設定寬度的情況下預設繼承父元素的寬度