css padding和margin的百分比

前段時間我同事對於margin和padding應用百分比值彷佛有些誤解，以爲多是個廣泛問題，因此以爲有必要拿出來單獨寫一下。

margin和padding均可以使用百分比值的，但有一點可能和一般的想法不一樣，就是 margin-top | margin-bottom | padding-top | padding-bottom 的百分比值參照的不是容器的高度，而是寬度 。

引用標準(2.1)原來的表達：

 

The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.

The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.

寬度參照寬度這點毫無疑問，但高度參照的也是寬度這點，可能就和一般的思路相左，由於畢竟height應用百分比參照的，依然是容器的高度。

關於爲何標準要這麼定義，有幾種一般的解釋，就一併(我的)分析一下。因爲padding和margin相似，下文就只以padding-top爲例。

第一種說法是，padding-top若是以容器高度爲參照，那麼子元素應用padding值將會繼續加高容器的高度，容器高度的變化又會反過來繼續影響子元素的padding-top，陷入一個無限循環。

對於不定高的容器來講狀況確實如此，但對定高容器則並不成立，這點和height相似，這也是爲何height的容器也必須肯定好高度。也就是說，若是padding-top要參照容器高度，就必須和height同樣作兩種處理。

第二種說法則更爲可靠， 爲了保持padding(margin)四個值的一統一 。

padding(margin)的值不管引用何種計量，四個值都一直保持統一，難道單獨給百分比開特例？結合第一條的多狀況處理，若是標準定義padding-top參照容器高度的話，恐怕要列出至少4條以上的例外說明——而這對不管誰，都沒有好處:)

事實上，垂直padding參照體是寬度這點也很是有用。雖然早期固化像素的設計中百分比值幾乎不該用在padding或者margin上，但隨着移動自 適應的佈局的須要，百分比也逐漸稀疏日常。好比配合background-sizing保持背景的比例，配合media query調整對應的間距，不一而足。這些應用都基於一個事實： 不管垂直仍是水平，百分比值始終參考寬度 。

而寬度，實際上，正是自適應和現代web設計的靈魂。

 

轉自：http://www.tuicool.com/articles/yqIzYrZ