CSS中margin-top/bottom(padding-top/bottom)百分比為何以最近的塊級祖先元素的寬度而不是高度作計算？

01-15

CSS2.1 Box model

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.

margin：百分比的計算基於生成框的包含塊的寬度（margin-top/bottom也是如此）。
padding與之類似。

margin-top的計算值為何不相對於 containing block height？唯一能想出來的原因是margin-top值增大會撐開父容器的height，導致循環計算。但，margin-top值的percent相對於 containing block width有什麼意義？出於什麼原因要這樣設計？因為如果僅僅因為循環計算的原因，我覺得也可以用變通的方式來實現，比如：要求父容器固定高度時，margin-top百分比值生效，父容器不固定大小時，margin-top 百分比值不生效！

瀉藥。

@胡文斌給出的stackoverflow上的這個答案與題主的猜想都是不正確的。margin/padding-top/bottom 的百分比之所以按照 width 計算，其實理由很簡單，就是要匹配主要的 use cases。那就是——要構建在縱橫兩個方向上相同的 margin/padding。如果兩個百分比的相對方式不同，那用百分比就無法得到垂直和水平一致的留白。

有人也許會問，為什麼不是垂直方向上的 height 而是水平方向的 width？這其實容易理解。因為 CSS 的基本模型是著重於「排版」的需求，因此水平和垂直方向其實並不是同等權重的，更精確的說，是文字書寫方向決定的。常見的橫排文字時，我們排版的出發點是水平寬度一定，而垂直方向上是可以無限延展的。豎排文字則相反。所以在豎排文字時，margin/padding-* 其實就都按照 height 而不是 width 計算了。類似的且大家更熟悉的是 margin-top/bottom 在垂直方向上的 collapse（或者當豎排文字時是 margin-left/right 水平方向上的 collapse）。為什麼只有垂直方向 collapse 而水平就不呢？因為在典型的排版中，段落間的空白進行 collapse 是常見和方便的。而反過來水平方向上就幾乎沒有那樣的需求（只有表格在兩個方向上有對稱的 border collapse 的需求）。同樣的，在排版中，橫向百分比控制是常見的需求，但是縱向其實很少這樣的需求。有這樣需求的其實是GUI界面布局，布局和排版的區別在這個答案（在 CSS 布局中，用 float 好還是用 position 好？分別有什麼優勢？）我也提到過。

至於說死循環問題，其實這不是根本原因。大家可以想想 width 為什麼就不存在死循環了呢？

BTW，在現代web應用中，其實我們有更多的縱向橫向布局分割需求，這是傳統的百分比不能很好滿足的，所以CSS3實際上加入了 vw 和 vh 單位（相對於viewport的寬度和長度百分比），這比較好的解決了傳統CSS中margin/padding的百分比所不能滿足的那些需求。

如果用height來計算，百分比*容器高度=padding-top（假設這是A等式），但是容器的高度=內容高度+padding-top（B等式），如果A成立能得到
padding-top，
padding-top又影響到B等式，但B等式又是A等式的條件，用開發人員的說法是死循環了。。。神器（http://stackoverflow.com）有個文章清楚的解釋了。

w3c - Why are margin/padding percentages in CSS always calculated against width?

同意最高贊，因為把writing mode改成vertical 其實margin top就會按高的百分比了