我們可以把盒子想象成乙個容器，比如我們可以將html盒子想象成我們所生活的國家，而其中的body、head、p、div等盒子就可以可以把它想象成我們生活中各種各樣的房子。正是由於生活中的各種各樣的房子和物品使得我們的世界豐富多彩。margin相當於房子與房子之間的間隔，border就相當於房子的牆壁，將房子內的所有物品看成乙個整體content, 而 padding就是物品與牆壁之間的間隔。
標準模式
如上圖所示標準的盒子模型中width=content的寬，height=content的高。
ie模式
ie模式下：
width=content+橫向的border+橫向padding
width=content+縱向的border+縱向padding
css框模型概述
（1）當統一簡寫屬性時順序為：上(top) 右(right) 下(buttom) 左(left)
如：
padding-top
: 1px;
padding-right
: 2px;
padding-buttom: 3px;
padding-left
: 4px;
可簡寫為 padding：1px 2px 3px 4px;
margin-top
: 1px;
margin-right
: 2px;
margin-buttom: 3px;
margin-left
: 4px;
可簡寫為 margin：1px 2px 3px 4px;
border-width , border-style ,border-color;
簡寫成 border：寬度(width) 樣式(style) 顏色(color);
外邊距的 margin-width 的值型別有：auto | length | percentage。也可以使用簡寫的外邊距屬性同時改變所有的外邊距：margin: top right bottom left;(eg: margin:10px 20px 30px 40px) 記憶方式是元素周圍正上方順時針「上右下左」記憶。
並且規範還提供了省略的數值寫法，基本如下：
如果margin只有乙個值，表示上右下左的margin同為這個值。例如：margin:10px; 就等於 margin:10px 10px 10px 10px;
如果 margin 只有兩個值，第乙個值表示上下margin值，第二個值為左右margin的值。例如：margin:10px 20px; 就等於 margin:10px 20px 10px 20px;
如果margin有三個值，第乙個值表示上margin值，第二個值表示左右margin的值，第三個值表示下margin的值。例如：margin:10px 20px 30px; 就等於 margin:10px 20px 30px 20px;
如果margin有四個值，那這四個值分別對應上右下左這四個margin值。例如：margin:10px 20px 30px 40px;
在實際應用中，不推薦使用三個值的margin，一是容易記錯，二是不容易日後修改，一開始如果寫成margin:10px 20px 30px;日後需求改動為上10px，右30px，下30px，左20px，你不得不還是得把這個margin拆開為margin:10px 30px 30px 20px;費力且不討好，不如一開始就老老實實的寫成margin:10px 20px 30px 20px;來的實在，不要為了現在節省倆個位元組而讓日後再次開發的成本上公升。
css內邊距
css外邊距
css邊框
（2）css外邊距合併的問題
簡單地說，外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成乙個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。
（1)當乙個元素出現在另乙個元素上面時，第乙個元素的下外邊距與第二個元素的上外邊距會發生合併。請看下圖：
親自試一試
(2)當乙個元素包含在另乙個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合併。請看下圖：
親自試一試
(3)儘管看上去有些奇怪，但是外邊距甚至可以與自身發生合併
假設有乙個空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發生合併：
如果這個外邊距遇到另乙個元素的外邊距，它還會發生合併：
這就是一系列的段落元素占用空間非常小的原因，因為它們的所有外邊距都合併到一起，形成了乙個小的外邊距。
(4)外邊距合併初看上去可能有點奇怪，但是實際上，它是有意義的。以由幾個段落組成的典型文字頁面為例。第乙個段落上面的空間等於段落的上外邊距。如果沒有外邊距合併，後續所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味著段落之間的空間是頁面頂部的兩倍。如果發生外邊距合併，段落之間的上外邊距和下外邊距就合併在一起，這樣各處的距離就一致了。
注釋：只有普通文件流中塊框的垂直外邊距才會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合併。
實際工作中，垂直外邊距合併問題常見於第乙個子元素的margin-top會頂開父元素與父元素相鄰元素的間距，而且只在標準瀏覽器下(firffox、chrome、opera、sarfi)產生問題，ie下反而表現良好。例子可以檢視下面**(ie下表現「正常」，標準瀏覽器下檢視出現「bug」)：
xmlns="">
垂直外邊距合併title>
.top
.middle
.middle
.firstchild
style>
head>
class="top">
div>
class="middle">
class="firstchild">我其實只是想和我的父元素隔開點距離。div>
class="secondchild">
div>
div>
body>
html>如果按照css規範，ie(ie6及以下)的「良好表現」其實是乙個錯誤的表現，因為ie的haslayout渲染導致了這個「表現良好」的外觀。而其他標準瀏覽器則會表現出「有問題」的外觀。好了，如果你讀過了上面w3shcool的css外邊距合併的文章後，就很容易討論這個問題了。這個問題發生的原因是根據規範，乙個盒子如果沒有上補白(padding-top)和上邊框(border-top)，那麼這個盒子的上邊距會和其內部文件流中的第乙個子元素的上邊距重疊。
再說了白點就是：父元素的第乙個子元素的上邊距margin-top如果碰不到有效的border或者padding.就會不斷一層一層的找自己「領導」(父元素，祖先元素)的麻煩。只要給領導設定個有效的 border或者padding就可以有效的管制這個目無領導的margin防止它越級，假傳聖旨，把自己的margin當領導的margin執行。
對於垂直外邊距合併的解決方案上面已經解釋了，為父元素例子中的middle元素增加乙個border-top或者padding-top即可解決這個問題。
一般說來這個問題解釋到這裡，大多數文章就不會再深入下去了，但作為一名實戰開發者，最求的是知其然知其所以然，原本使用margin-top就是為了與父元素隔開距離，而按照你這麼乙個解法，其實是一種「修復」，為了「彌補修復」這個父子垂直外邊距合併這個css規範「bug」，而強制在父元素上使用border-top和padding-top，不舒服，也不容易記住，下次再發生這樣的情況還是會忘記這條準則，而且在頁面設計稿裡如果不需要border-top加個上邊框，這麼一加反而畫蛇添足，為以後修改留下隱患。
w3c外邊距合併
參考原文1
參考原文2
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...
css盒子模型 說說css盒子模型
引用mdn官方的解釋 當對乙個文件進行布局 lay out 的時候，瀏覽器的渲染引擎會根據標準之一的 css 基礎框盒模型 css basic box model 將所有元素表示為乙個個矩形的盒子 box css 決定這些盒子的大小 位置以及屬性 例如顏色 背景 邊框尺寸 每個盒子由四個部分 或稱區...
css 盒子模型 ie盒子模型
css盒子模型 網頁設計中css技術所使用的一種思維模型。css盒子模型組成 外邊距 margin 邊框 border 內邊距 padding 內容 content css盒子模型分為 標準w3c盒子模型，ie盒子模型，注意在兩種模型中寬 width 和高 height 包括屬性的不同。標準w3c盒...