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

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

它的外邊距與頂部的距離為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中文網其他相關文章！