1. <div class="box"></div>    <style type="text/css">   
2.     .box {            width: 200px;   
3.         height: 200px;            background-color: green;   
4.         padding: 20px;            border: 5px solid red;   
5.         margin: 50px;        }   
6. </style>  

顯式效果：

你可以使用Chrome（Ctrl + Shift + j）或者Firefox的firebug等開發者工具查看盒模型：

我做了些簡單的標記，黑色方框實線和最外邊的虛線一樣，都是為了標識，而不是設置的樣式：

我們可以看到，div的內容寬高度均為200px，對一個block或者inline-box元素設置內邊距padding，內邊距會影響一些CSS元素，比如說背景也會顯式在padding上。
紅色的為border，而border元素并不會算進元素內容，也就是說沒辦法獲得背景等。
margin元素一般是看不見的，也無法對其設置顏色等，margin常用來與其他元素分割一些距離。
通過DOM改變border的大小，或者顯式border，會改變元素的大小，可能會打亂布局，CSS中還有一個屬性outline，這個屬性和border相類似，也是可以作為邊框使用，但是和border不同的是，它是繪制在內容上的，并不會改變盒子大小。IE7和更低版本不支持outline。

外邊據疊加
盒子模型還有一個特殊的東西，就是相鄰的外邊據相遇會進行疊加，取最大的為最終外邊據。