對元素的margin設定百分數時，百分數是相對于父元素的width計算，不管是margin-top/margin-bottom還是margin-left/margin-right。padding的原理也是一樣的。
為什麼margin-top/margin-bottom的百分數是相對於width而不是height呢？
css權威指南中的解釋：
我們認為，正常流中的大多數元素都會足夠高以包含其後代元素（包括外邊距），如果乙個元素的上下外邊距是父元素的height的百分數，就可能導致乙個無限迴圈，父元素的height會增加，以適應後代元素上下外邊距的增加，而相應的，上下外邊距因為父元素height的增加也會增加，如此迴圈。
原文：
測試position和margin的百分比
測試position的百分比 position的left的百分比是根據父元素的寬度來取值的,如果父元素有paddding,則根據width padding position的top的百分比是根據父元素的高度來取值的,如果父元素有paddding,則根據height padding 測試margin的...
關於padding和margin的百分比
最近隨手習慣性的寫了個樣式margin top 10 本意是想它裡上面的高度是現有父節點高度的10 但事實並非如此。它離上面的高度始終是比預期的多出許多，才著重的研究起來這個屬性的具體演算法。經過各種嘗試，發現這個百分比是針對的父元素的寬度，並不是高度，知道真相的我大吃一驚，所以再捋了捋。首先在do...
margin百分比，重疊和auto
一.margin百分比 1.普通元素的百分比margin都是相對於容器的寬度計算 2.絕對定位元素的百分比margin是相對於第乙個定位祖先元素 relative absolute fixed 的寬度計算 這是在預設的 writing mode horizontal tb 和 direction l...