本 章 Ｃ Ｓ Ｓ 的 主 要 作 用
本章介紹的是區塊性質的ＣＳＳ指令以及它 們的應用與特性，可以設定與控制區塊的位置，大小及邊緣寬度等性質。本章也將分成 兩個部份為您介紹，第一部份要講的是區塊各部份名稱與概念的介紹，對於區塊有一點 概念後，第二部份才再進入區塊性質的ＣＳＳ指令的介紹。
區 塊 各 部 份 名 稱 與 概 念
其實我們還可以把所謂的「區塊」細分成的幾個部份。
由外而內為您作介紹：
MARGIN： 邊緣，雖然是通透的部份，但是可以藉由邊緣寬度的調整來達到內容元素位置調整的目的。
BORDER： 邊框，就是外框的部份，經由ＣＳＳ指令您可以控制邊框的寬度、顏色和樣式，不再死板！
PADDING： 補白，也就是內容元素與框架之間的這段距離與空間，也可以利用ＣＳＳ指令去控制大小。
元素： 內容元素，也就是您放置於該區塊內的內容，或為文字，或為圖形，或為所有其它元素。 附帶一提的是，所謂的區塊寬度是指整個包含邊緣在內的寬度，而元素寬度指的只 是內容元素的寬度。有了這些對區塊各部份的基本概念與認識之後，接下來就要來介紹 控制區塊各部份分別的的ＣＳＳ指令了！
區 塊 性 質 的 Ｃ Ｓ Ｓ 指 令
margin-top 設定上邊緣寬度
margin-right 設定右邊緣寬度
margin-bottom 設定下邊緣寬度
margin-left 設定左邊緣寬度
支 持：ＩＥ３、ＩＥ４、ＮＣ４
適 用：區塊元素
可能值：
<length>
長度單位，請參考第一章基本單位的相關說明
<percentage>
百分比，相對於元素寬度大小
auto
使用浏覽器預設值預設值：0
繼承性：無
一般范例：DIV { margin-top : 20pt }
同軸范例：<DIV style="margin-top:20pt">
margin 綜合設定邊緣寬度
支 持：ＩＥ３、ＩＥ４、ＮＣ４
適 用：區塊元素
可能值：依序設定top,right,bottom,left的邊緣寬度
<length> {1,4}
長度單位，請參考第一章基本單位的相關說明
<percentage> {1,4}
百分比，相對於元素寬度大小
auto {1,4}
使用浏覽器預設值預設值：無
繼承性：無
一般范例：DIV { margin : 20pt 15pt 10pt 5pt }
同軸范例：<DIV style="margin:20pt 15pt 10pt 5pt"> 要附帶說明的是，如果指定了四個合法設定值，則會依序套用於四個邊緣；如果只 有指定一個合法設訂值，則會統一套用於四個邊持；若只有指定二或三個合法設定值，則 未指定的邊緣會套用對邊的寬度設定值。
DIV { margin: 20pt }
→top=20pt;right=20pt;bottom=20pt;left=20pt
DIV { margin: 20pt 15pt }
→top=20pt;right=15pt;bottom=20pt;left=15pt
DIV { margin: 20pt 15pt 10pt }
→top=20pt;right=15pt;bottom=10pt;left=15pt
border-top-width 設定上邊框寬度
border-right-width 設定右邊框寬度
border-bottom-width設定下邊框寬度
border-left-width 設定左邊框寬度
支 持：ＩＥ４、ＮＣ４
適 用：區塊元素
可能值：thin < medium < thick
thin
統一的絕對單位，因浏覽器而異
medium
統一的絕對單位，因浏覽器而異
thick
統一的絕對單位，因浏覽器而異
<length>
長度單位，請參考第一章基本單位的相關說明預設值：medium
繼承性：無
一般范例：DIV { border-top-width : 2pt }
同軸范例：<DIV style="border-top-width:2pt">
border-width 綜合設定邊框寬度
支 持：ＩＥ４、ＮＣ４
適 用：區塊元素
可能值：依序設定top,right,bottom,left的邊框寬度
thin {1,4}
統一的絕對單位，因浏覽器而異
medium {1,4}
統一的絕對單位，因浏覽器而異
thick {1,4}
統一的絕對單位，因浏覽器而異
<length> {1,4}
長度單位，請參考第一章基本單位的相關說明預設值：無
繼承性：無
一般范例：DIV { border-width : 4pt 3pt 2pt 1pt }
同軸范例：<DIV style="border-width:4pt 3pt 2pt 1pt"> 要附帶說明的是，如果指定了四個合法設定值，則會依序套用於四個邊框；如果只 有指定一個合法設訂值，則會統一套用於四個邊框；若只有指定二或三個合法設定值，則 未指定的邊框會套用對邊的寬度設定值。
DIV { border-width: 2pt }
→top=2pt;right=2pt;bottom=2pt;left=2pt
DIV { border-width: 2pt 3pt }
→top=2pt;right=3pt;bottom=2pt;left=3pt
DIV { border-width: 2pt 3pt 4pt }
→top=2pt;right=3pt;bottom=4pt;left=3pt
border-top-color 設定上邊框顏色
border-right-color 設定右邊框顏色
border-bottom-color 設定下邊框顏色
border-left-color 設定左邊框顏色
支 持：ＩＥ４、ＮＣ４
適 用：區塊元素
可能值：
<color>
設定顏色，請參考第一章顏色使用的相關說明預設值：color性質之值
繼承性：無
一般范例：DIV { border-top-color : BLUE }
同軸范例：<DIV style="border-top-color:BLUE">
border-color 綜合設定邊框顏色
支 持：ＩＥ４、ＮＣ４
適 用：區塊元素
可能值：依序設定top,right,bottom,left的邊框顏色
<color> {1,4}
設定顏色，請參考第一章顏色使用的相關說明預設值：無
繼承性：無
一般范例：DIV { border-color : RED GREEN BLUE YELLOW }
同軸范例：<DIV style="border-color:RED GREEN BLUE YELLOW"> 要附帶說明的是，如果指定了四個合法設定值，則會依序套用於四個邊框；如果只 有指定一個合法設訂值，則會統一套用於四個邊框；若只有指定二或三個合法設定值，則 未指定的邊框會套用對邊的顏色設定值；若無指定此一性質，則套用color性質之設定值。
DIV{border-color:RED }
→top=RED;right=RED;bottom=RED;left=RED
DIV{border-color:RED GREEN }
→top=RED;right=GREEN;bottom=RED;left=GREEN
DIV{border-color: RED GREEN BLUE}
→top=RED;right=GREEN;bottom=BLUE;left=GREEN
border-top-style 設定上邊框樣式
border-right-style 設定右邊框樣式
border-bottom-style 設定下邊框樣式
border-left-style 設定左邊框樣式
支 持：ＩＥ４、ＮＣ４
適 用：區塊元素
可能值：
none
不顯示邊框
dotted
虛線（ＩＥ４、ＮＣ４浏覽器當作實線）
dashed
短直線（ＩＥ４、ＮＣ４浏覽器當作實線）
solid
實線
double
雙直線
ridge
３Ｄ凸線
groove
３Ｄ凹線
outset
３Ｄ隆起（ＩＥ４不顯示）
inset
３Ｄ嵌入（ＩＥ４不顯示）預設值：none
繼承性：無
一般范例：DIV { border-top-style : inset }
同軸范例：<DIV style="border-top-style:inset">
border-style 綜合設定邊框樣式
支 持：ＩＥ４、ＮＣ４
適 用：區塊元素
可能值：依序設定top,right,bottom,left的邊框樣式
none {1,4}
不顯示邊框
dotted {1,4}
虛線（ＩＥ４、ＮＣ４浏覽器當作實線）
dashed {1,4}
短直線（ＩＥ４、ＮＣ４浏覽器當作實線）
solid {1,4}
實線
double {1,4}
雙直線
ridge {1,4}
３Ｄ凸線
groove {1,4}
３Ｄ凹線
outset {1,4}
３Ｄ隆起（ＩＥ４不顯示）
inset {1,4}
３Ｄ嵌入（ＩＥ４不顯示）預設值：無
繼承性：無
一般范例：DIV { border-style : ridge groove outset inset }
同軸范例：<DIV style="border-style:ridge groove outset inset"> 要附帶說明的是，如果指定了四個合法設定值，則會依序套用於四個邊框；如果只 有指定一個合法設訂值，則會統一套用於四個邊框；若只有指定二或三個合法設定值，則 未指定的邊框會套用對邊的樣式設定值。
DIV{border-width:outset}
→top=outset;right=outset;bottom=outset;left=outset
DIV{border-width:outset inset}
→top=outset;right=inset;bottom=outset;left=inset
DIV{border-width:outset inset ridge}
→top=outset;right=inset;bottom=ridge;left=inset
border-top 綜合設定上邊框性質
border-right 綜合設定右邊框性質
border-bottom 綜合設定下邊框性質
border-left 綜合設定左邊框性質
支 持：ＩＥ４、ＮＣ４
適 用：區塊元素
可能值：
<border-width>
設定該邊框寬度，請參考上面的介紹與說明
<border-style>
設定該邊框樣式，請參考上面的介紹與說明
<border-color>
設定該邊框顏色，請參考上面的介紹與說明預設值：無
繼承性：無
一般范例：DIV { border-top : 2pt solid BLUE }
同軸范例：<DIV style="border-top:2pt solid BLUE">
border 綜合設定邊框性質
支 持：ＩＥ４、ＮＣ４
適 用：區塊元素
可能值：
<border-width>
設定邊框寬度，請參考上面的介紹與說明
<border-style>
設定邊框樣式，請參考上面的介紹與說明
<border-color>
設定邊框顏色，請參考上面的介紹與說明預設值：無
繼承性：無
一般范例：DIV { border : 2pt solid BLUE }
同軸范例：<DIV style="border:2pt solid BLUE"> 要附帶說明的是，這個指令只能指定一組設定值，也就是說，上右下左四個邊框都將套用同一組的設定值，而不能作個別邊框的設定值變化。
padding-top 設定上方補白寬度
padding-right 設定右方補白寬度
padding-bottom 設定下方補白寬度
padding-left 設定左方補白寬度
支 持：ＩＥ４、ＮＣ４
適 用：區塊元素
可能值：
<length>
長度單位，請參考第一章基本單位的相關說明
<percentage>
百分比，相對於元素寬度大小預設值：0
繼承性：無
一般范例：DIV { padding-top : 5pt }
同軸范例：<DIV style="padding-top:5pt">
padding 綜合設定補白寬度
支 持：ＩＥ４、ＮＣ４
適 用：區塊元素
可能值：依序設定top,right,bottom,left的補白寬度
<length> {1,4}
長度單位，請參考第一章基本單位的相關說明
<percentage> {1,4}
百分比，相對於元素寬度大小預設值：無
繼承性：無
一般范例：DIV { padding : 2pt 5pt 2pt 5pt }
同軸范例：<DIV style="padding:2pt 5pt 2pt 5pt"> 要附帶說明的是，如果指定了四個合法設定值，則會依序套用於四個補白；如果只有指定一個合法設訂值，則會統一套用於四個補白；若只有指定二或三個合法設定值，則 未指定的補白會套用對邊的寬度設定值。
DIV { padding: 1pt }
→top=1pt;right=1pt;bottom=1pt;left=1pt
DIV { padding: 1pt 2pt }
→top=1pt;right=2pt;bottom=1pt;left=2pt
DIV { padding: 1pt 2pt 3pt }
→top=1pt;right=2pt;bottom=3pt;left=2pt