任何乙個元素都可以看作是乙個盒子，在css中，box model這一術語是用來設計和布局時使用。css盒模型本質上是乙個盒子，封裝周圍的html元素，它包括：邊距，邊框，填充，和實際內容。請看圖：
盒子共包括以下幾個部分：
內容區是指元素內容所佔的實際大小，是width和height所圍成的區域；內容區往外一層就是內邊距，是元素邊框border與元素內容之間的區域；border區可以設定元素邊框的樣式，包括邊框的寬度顏色型別等；margin區就是元素的外邊距，一般是用於設定元素與元素之間的間距。
padding、border和margin都可以設定四個方向上的屬性樣式，以padding為例：
padding
:10px;
/*乙個屬性值，設定四個方向的內邊距都是10px*/
padding
:10px 20px;
/*兩個屬性值，分別是上下內邊距為和左右邊距*/
padding
:10px 20px 30px;
/*三個屬性值，分別是上邊距、左右邊距、下邊距*/
padding
:10px 10px 10px 10px;
/*四個屬性值，從上邊距開始順時針方向依次設定的各個方向的邊距*/
在ie8及更早版本中，並不是採用標準的盒子模型，width屬性並不是內容的寬度，而是內容、內邊距和邊框的寬度總和,且不支援設定padding和border的寬度屬性，解決不能設定padding和border寬度的的辦法很簡單，就是在文件頭加宣告即可。
什麼是垂直外邊距合併？
當我們為相鄰兩個元素設定水平方向的外邊距時，元素之間的間隙就是兩個元素之間的margin值之和，但是，在垂直方向上的卻不是我們所想的一樣。
#div1
#div2
#div3
div>
id="div2">盒子2
div>
id="div3">盒子3
div>
效果圖：
這裡以盒子3與盒子2之間的間距作參考可看出盒子2和盒子1之間的外邊距合併了，這就是垂直外邊距合併的問題。
注意：垂直外邊距合併的情況只出現在普通文件流的塊級元素之間，對於inline元素和inline-block元素，以及脫離文件流的元素不會合併
css盒子模型 CSS 盒子模型詳解（一）
在網頁布局中，一定離不開盒子模型這個東西。今天就來說一下這個概念。所謂盒子模型 box model 就是把 html 頁面中的元素看作是乙個矩形的盒子，也就是乙個盛裝內容的容器。或者說，每乙個可見的 html 元素都是乙個盒子。每個矩形都由元素的內容 content 內邊距 padding 邊框 b...
盒子模型與怪異盒子模型
所有html元素可以看作盒子，在css中，box model 這一術語是用來設計和布局時使用。css盒模型本質上是乙個盒子，封裝周圍的html元素，它包括 邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。下面的說明了盒子模型 box model content...
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...