一、margin與padding的差異：
當我們把網頁想像成一面牆時，網頁中的內容總是可以歸納為由一個個的盒子所構成的，如圖：
這裡單獨地把一個盒子拿出來，就會發現由外邊距、邊框、內邊距和內容四部分構成：
這裡面紅線所標識的為外邊距（margin）、再向裡灰色的標識為邊框（border）、藍色線所標識的為內邊距（padding）、再向裡是具體的內容（content），是否與照片非常相似？此時也可以認為盒子模型中的盒子就是一個塊（div），它是由相片框、相片及相片框與外面牆的距離、相片框和相片之間的距離所構成。
二、範例：
1、
div
{
margin:3px 5px 6px;
padding:4px 6px;
border-width:6px;
border-color:black;
width:500;
heigth:300;
}
#這段盒子定義描述了一個盒子那麼盒子：
它的外邊距與頂部的距離為3像素、外邊距與左右部的距離為5像素，外邊距為底部的距離為6像素；
它的邊框寬度為6像素，邊框顏色為黑色；
它的內邊距與上下邊框的距離為4像素，與左右邊框的距離為6像素；
照片的大小為500* 300
2、盒子缺省值的說明，以margin為例：
margin:4px;
表示盒子與上右下左邊距的距離均為4像素；
margin:4px 6px;
表示盒子與上下邊距的距離為4像素，右左邊距的距離為6像素；
margin:4px 5px 6px;
表示盒子與上邊距的距離為4像素，與右左邊距的距離為5像素，與下邊距的距離為6像素；
margin:4px 5px 6px 7px ;
表示盒子與上邊距的距離為4像素，與右邊距的距離為5像素，與下邊距的距離為6像素，與左邊距的距離為7像素；
以上是CSS的盒子模型介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
