margin和padding是我們在網頁設計經常使用到的css樣式，他們分別是間距和填充，乙個作用於盒子外面，乙個作用於盒子裡面，預設的情況下，這些屬性的值都會被計算在盒子的面積裡面，在網頁開發中的流體布局或者是響應式布局中，經常將margin和padding設定成百分數，那麼到底這個百分數是多少，他是如何計算的呢？
假設我們有這樣的一段html**，外面乙個div寬度980px，高度500px，裡面有乙個子元素div，寬度和高度都不設定，然後給他設定margin:10% 5%，這個屬性相當於margin:10% 5% 10% 5%。
這個div設定：margin:10% 5%
.demo1為了方便檢視效果，我們還分別為他們設定了不同的背景。.demo1 div
這裡還出現了乙個小的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的基礎需求是排版，而通常我們所見的橫排文字，其水平寬度一定（仔細回想一下，如果沒有顯式的定義寬度 或者強制一行顯示，都會遇到邊界換行，而不是水平延展），垂直方向可以無限延展。但當書寫模式為縱向時，其參照就變成了高度而不再是寬度了。
margin和padding之我見
採用div css排版的話,如果有float屬性,在ie中選中文字的時候,經常會出現把一整個div全部選中,非常難看 而有時候又不會出現這種情況,自己是不是遇到過了?呵呵,奇怪吧,我來給你講.其實原因很簡單,主要看你做事是不是細心.這個就是margin和padding的區別了.如果你不知道margi...
margin和padding 的區別
經常會看到這樣的布局android layout margintop 1.0dip 比較迷惑。查了下資料，有篇文章講的不錯，拿來一起分享！就拿layout margintop和paddingtop為例。layout margintop是從當前設定的控制項的頭部，開始向上移動，直到碰到上乙個控制項 父...
margin和padding的區別
padding 10px 0 10px 20px，上10 右0 下10 左20 margin 10px 0 10px 20px，上10 右0 下10 左20 四個值順時針旋轉 目前web2.0已經越來被人們認可，因為喜歡搞web開發的人員不得不硬著頭皮去學習web2.0的標準，其中很重要的一條就是新...