(轉)當margin-top、padding-top的值爲百分比時是如何計算的？

本文連接：https://blog.csdn.net/qq_27437967/article/details/72625900
問題：當margin-top、padding-top的值是百分比時，分別是如何計算的？
A 相對父級元素的height，相對自身的height
B 相對最近父級塊級元素的height，相對自身的height
C 相對父級元素的width，相對自身的width
D 相對最近父級塊級元素的width，相對最近父級塊級元素的width

答案：D

能夠對元素的margin設置百分數，百分數是相對於父元素的width計算，無論是margin-top/margin-bottom仍是margin-left/margin-right。（padding同理）

若是沒有爲元素聲明width，在這種狀況下，元素框的總寬度包括外邊距取決於父元素的width，這樣可能獲得「流式」頁面，即元素的外邊距會擴大或縮小以適應父元素的實際大小。若是對這個文檔設置樣式，使其元素使用百分數外邊距，當用戶修改瀏覽窗口的寬度時，外邊距會隨之擴大或縮小。

爲何margin-top/margin-bottom的百分數也是相對於width而不是height呢？

CSS權威指南中的解釋：

咱們認爲，正常流中的大多數元素都會足夠高以包含其後代元素（包括外邊距），若是一個元素的上下外邊距時父元素的height的百分數，就可能致使一個無限循環，父元素的height會增長，以適應後代元素上下外邊距的增長，而相應的，上下外邊距由於父元素height的增長也會增長，若是循環。

---

原文連接：https://blog.csdn.net/qq_27437967/article/details/72625900