CSS的盒子模型介紹

一、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;
}

這段CSS定義描述了這麼一個盒子：

它的外邊距與頂部的距離為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像素；