W3C組織建議把所有網頁上的對像都放 在一個盒(box)中，設計師可以通過建立定義來控制這個盒的屬性，這些對像包括段落、清單、标題、圖檔以及層。
盒模型主要定義四個區域：内容 (content)、邊框距(padding)即内邊距、邊界(border)和外邊距(margin)。 對于初學者，經常會搞不清楚margin，background-color，background- image，padding，content，border之間的層次、關系和互相影響。這裡提供一張盒模型的平面示意圖，希望便于你的了解和記憶。
margin和padding屬性:
1. Margin: 包括margin-top, margin-right, margin-bottom, margin-left, 控制塊級元素之間的距離, 它們是透明不可見的, 對于Fig. 2所示的上右下左margin值均為40px, 是以代碼為:
margin-top: 40px;
margin-right: 40px;
margin-bottom: 40px;
margin-left: 40px;
根據上, 右, 下, 左的順時針規則, 簡寫為
margin: 40px 40px 40px 40px;
當上下, 左右margin值分别一緻, 可簡寫為:
margin: 40px 40px;
前一個40px代表上下margin值, 後一個40px代表左右margin值.
當上下左右margin值均一緻, 可簡寫為:
margin: 40px;
2. Padding: 包括padding-top, padding-right, padding-bottom, padding-left, 控制塊級元素内部, content與border之間的距離, 其代碼, 簡寫請參考margin屬性的寫法.
· 浏覽器預設的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統一。
代碼示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
body{
margin:0px;
}
.test1{
width:150px;
height:150px;
border:6px solid red;
}
.test2{
margin-top:40px;
padding-top:40px;
width:150px;
height:150px;
border:6px solid gray;
}
.test2_son{
width:80px;
height:50px;
border:12px solid blue;
}
</style>
</head>
<body>
<div class="test1">test1</div>
<div class="test2">
<div class="test2_son">test2_son</div>
</div>
</body>
</html>
說明：圖中灰色地帶是class值為test2的div的邊框，它是有寬度的；
①、内邊距和外邊距是針對于其作用的元素和其他元素來講的，某一進制素的内邊距在另一個元素看來有可能是
外邊距，比如：class值為test2 div的内邊距在class值為test2_test div元素看來就是外邊距，是以上面代碼也可以
這樣寫：将class值為test2的div樣式清單中“padding-top:40px;”去掉，class值為test2_test div元素添
加“margin-top:40px;”——這樣的效果和代碼2-1是一樣的；