盒模型中padding、border、margin的區別

在CSS中，規定了一種基本設計模型——盒模型（也叫框模型），如圖所示：

其中包含了四部份內容：element/元素（即圖中文字）、padding/內邊框（圖中兩個紅色邊框之間白色部分）、border/邊框（藍色區域）、margin/外邊框（圖中兩綠色邊框中間白色部分）。

區別：

1. element佔據的就是字體自己的字號大小；
2. padding和margin 相似，指的是一段距離，只能設置上、下、左、右方向的一段長度，不能設置區域顏色；
3. 而border指的是一塊區域，能夠設置上下左右方向的長度，並且能夠設置這段空間的顏色上下
4. padding、border、margin三者均可以對上、下、左、右四個方向設置不一樣的寬度。

下面對各項的語法規則作一個簡單對比　　　　　　　　　　　　

font-size: 20px;	　　　　　　　　 　/*設置element的字號*/
padding-top:20px;		/*設置padding上框高度*/
padding-right:30px;		/*設置padding右框寬度*/
padding-bottom:40px;	　　　　　/*設置padding下框寬度*/
padding-left:50px;		/*設置padding左框寬度*/
margin: T R B L;		/*與padding用法基本相同，此處示例四個方向邊框寬度的合併設置語法規則*/
border: size style color;	/*border也可像padding和margin設置不一樣方向邊框的寬度，此處示例對border 一步設定大小、風格（斜體）、顏色。*/