之前一直有一個誤區,以為margin和Padding在取百分比的時候,以為margin是父盒子的寬度,padding是自身的寬度百分比,實際是有誤區的

Margin和Padding是我們在網頁設計經常使用到的CSS樣式，他們分別是間距和填充，一個作用於盒子外面，一個作用於盒子裡面，預設的情況下，這些屬性的值都會被計算在盒子的面積裡面，在網頁開發中的流體佈局或者是響應式佈局中，經常將Margin和Padding設定成百分數，那麼到底這個百分數是多少，他是如何計算的呢？

Margin

假設我們有這樣的一段HTML程式碼，外面一個DIV寬度980px，高度500px，裡面有一個子元素DIV，寬度和高度都不設定，然後給他設定margin:10% 5%

HTML程式碼

<div class="demo1">
    <div>這個div設定：margin:10% 5%</div>
</div>

CSS程式碼

.demo1{ height:500px; width:980px; margin:0 auto; background:#EEE; overflow:hidden;}
.demo1 div{margin:10% 5%; background:#666;}

為了方便檢視效果，我們還分別為他們設定了不同的背景。

這裡還出現了一個小的hack，就是demo1盒子不會緊挨著body，也就是不會定格佈局，而且body元素上面還有一段空白，這段空白的高度剛好是.demo1 div元素的margin-top，demo1和.demo1 div元素都是頂格對其的，只要給demo1元素設定overflow:hidden，即可解決這個問題，點選這裡

我們根據以往的理解，.demo1 div的margin應該是：50px 49px 50px 49px，但是執行以後，通過檢視盒模型示意圖，卻發現是：98px 49px 98px 49px，這是怎麼回事呢？

這個98px是如何得到的呢，其實就是寬度的10%，等等，我們設定TOP為10%，不是應該參考元素的高度麼，不信你可以點選這個示例頁面看看效果。

總結

從上面的示例和程式碼，我們可以發現當margin設定成百分數的時候，其top right bottom left的值是參照父元素盒子的寬度進行計算，在w3c的規範中也是這樣描述的： margin的百分比值參照其包含塊的寬度進行計算，同樣的padding如果設定成百分數的話，其盒子模型和margin是一樣的。

這隻發生在預設的 writing-mode: horizontal-tb; 和 direction: ltr; 的情況下，當書寫模式變成縱向的時候，其參照將會變成包含塊的高度。

為什麼要選擇寬度做參照而不是高度呢？

這其實更多的要從CSS設計意圖上去想，因為CSS的基礎需求是排版，而通常我們所見的橫排文字，其水平寬度一定（仔細回想一下，如果沒有顯式的定義寬度 或者強制一行顯示，都會遇到邊界換行，而不是水平延展），垂直方向可以無限延展。但當書寫模式為縱向時，其參照就變成了高度而不再是寬度了。