元素(element)的盒子模型(box model)

CSS將所有的元素視為一個盒子(box),由內容(content)、留白(padding)、外框(border)與邊界(margin)所組成,圖示說明如下:


邊界 (margin)
外框 (border)
留白 (padding)
內容 (content)

實際上我們來看一個段落元素(P)的 box model

內容 (content):由width與high組成內容的長與寬

小細節


邊界 (margin)
與其它元素間的距離。
意義 範例 備註
簡潔表示
margin: 1em 2em;

其值可設定為負數(重要的定位技巧),特別注意的是垂直邊界是取2元素中margin最大的那一個而非像水平邊界為margin的加總

簡潔表示法的順序為「上」、「右」、「下」、「左」

上方
margin-top: 1em;
右方
margin-right: 2em;
下方
margin-bottom: 1em;
左方
margin-left: 2em;
外框 (border)
元素以框線包起來 ,可指定的屬性類別有寬度、樣式、顏色、簡稱等四大類。
寬度(width)
意義 範例 備註
簡潔表示
border-width: thin thick;

其值不可為負數,除了使用數值定義寬度外可使用關鍵字「thin」、「medium」、「thick」

簡潔表示法的順序為「上」、「右」、「下」、「左」

上方
border-top-width: 2px;
右方
border-right-width: thick;
下方
border-bottom-width: 3px;
左方
border-left-width: medium;
顏色(color)
意義 範例 備註
簡潔表示
border-color: silver;

可用的顏色名稱(color-name):aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

顏色值的設定(color-value):紅綠藍( rgb)的16進位表示法: #336699, #369, rgb(51,102,153), rgb(30%,60%,100%)

若沒有指定顏色,預設與元素的顏色(color)一樣

上方
border-top-color: #336699;
右方
border-right-color: rgb(51,102,153);
下方
border-bottom-color: #369;
左方
border-left-color: rgb(30%,60%,100%);
樣式(style)
意義 範例 備註
簡潔表示
border-style: solid dotted;

可用的樣式關鍵字有:none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset

並不是所有的瀏覽器都支援指定的樣式效果

上方
border-top-style: solid;
右方
border-right-style: dotted;
下方
border-bottom-style: double;
左方
border-left-style: outset;
簡稱(shorthand)
意義 範例 備註
簡潔表示
border: solid red;

因為框線有width, color, style三種因素,所以在此的簡潔表示法不像 margin與padding可以分別指定四個邊,只能統一設定四個邊

上方
border-top: solid red;
右方
border-right: solid red;
下方
border-bottom: solid red;
左方
border-left: solid red;
留白 (padding)
內容與框線之間的距離
意義 範例 備註
簡潔表示
padding: 2px 3px;

其值不可為負數

簡潔表示法的順序為「上」、「右」、「下」、「左」

上方
padding-top: 2px;
右方
padding-right: 3px;
下方
padding-bottom: 2px;
左方
padding-left: 3px;
內容 (content)
若為行內(inline)元素,就是資料本身,若為區塊(block)元素還可由width與height屬性組成內容的長與寬
意義 範例 備註
寬度
width: 760px;

其值不可為負數

IE 5.5的實作錯誤,其width與height皆包含了content, padding與border

長度
height: 1000px;