區塊(Box)

`border`屬性

非繼承屬性，設定區塊上下左右的線寬(border-width)、種類(border-style)、顏色( border-color)等3種屬性。設定時不用按照順序排列，以半形空白做區隔。可以省略，被省略的屬性值為個屬性的初期值。

△Win IE
○Firefox
○Opera
○Safari
△MC IE

屬性	適用元素	屬性值	說明
border bord-top bord-bottom bord-left bord-right	all(除表格元素、非置換元素)	border-width border-style border-color	→ 區塊上下左右的線寬 → 區塊上下左右的種類 → 區塊上下左右的顏色

.all(除表格元素、非置換元素)	{  border:1px red solid;}

.top	{  border-top: 2px gray groove;}

.left	{  border-left:10px teal solid;}

.bottom	{  border-bottom:2px fuchsia dotted;}

.right	{  border-right:120px teal solid;}

output

區塊上下左右
區塊上邊線
區塊左邊線
區塊下邊線
區塊右邊線

`border-color`屬性

非繼承屬性，設定區塊上下左右的線寬(border-width)、種類(border-style)、顏色( border-color)等3種屬性。設定時不用按照順序排列，以半形空白做區隔。可以省略，被省略的屬性值為個屬性的初期值。

△Win IE
○Firefox
○Opera
○Safari
○MC IE

屬性	適用元素	屬性值	說明
border-color bord-top-color bord-bottom-color bord-left-color bord-right-color	all(除表格元素、非置換元素)	顏色 transparent inherit	→ 指定16進位RGB、Color Name值 → 透過顯示該元素的背景色 → 強制繼承上層元素的屬性值

.color	{  border:3px solid;border-color:red; background-color:gray;}

.transp	{  border:3px solid;border-color:transparent; background-color:gray;}

output

區塊上下左右劃紅線
透過顯示該元素的背景色

`border-style`屬性

非繼承屬性，設定區塊上下左右的線寬(border-width)、種類(border-style)、顏色( border-color)等3種屬性。設定時不用按照順序排列，以半形空白做區隔。可以省略，被省略的屬性值為個屬性的初期值。

△Win IE
○Firefox
○Opera
○Safari
○MC IE

屬性	適用元素	屬性值	說明
border-style bord-top-style bord-bottom-style bord-left-style bord-right-style	all(除表格元素、非置換元素)	none hidden dotted dashed solid double groove ridge inset outset inherit	→ 不設框線，borde-width強制變成"0" → 不設框線（"border-collapse : collapse ;" 時) → 點線 → 破線 → 實線 → 雙線 → 立體線(凹陷) → 立體線(凸起) → 立體線(左上凹陷) → 立體線(左上凸起) → 強制繼承上層元素的屬性值

.hidden	{ border:5px orange; border-style: hidden; }

.dotted	{ border:5px orange; border-style:dotted; }

.dashed	{ border:5px orange; border-style: dashed; }

.solid	{ border:5px orange; border-style: solid; }

.double	{ border:5px orange; border-style: double; }

.groove	{ border:5px orange; border-style: groove; }

.ridge	{ border:5px orange; border-style: ridge; }

.inset	{ border:5px orange; border-style: inset; }

.outset	{ border:5px orange; border-style: outset; }

output

hidden
dotted
dashed
solid
double
groove
ridge
inset
outset

`border-width`屬性

非繼承屬性，設定區塊上下左右的線寬。可以設定1到4個值，以半形空白作區隔。1個值代表「上下左右」的線寬，2個值代表「上下」「左右」的線寬，3個值代表「上」「左右」「下」的線寬，4個值代表「上」「右」「下」「左」的線寬。

○Win IE
○Firefox
○Opera
○Safari
○MC IE

屬性	適用元素	屬性值	說明
border-width bord-top-width bord-bottom-width bord-left-width bord-right-width	all(除表格元素、非置換元素)	長度 thin medium thick inherit	em、px等長度(相對、絕對單位)值(不可為負數) → 細線 → 標準 → 粗線 → 強制繼承上層元素的屬性值

.thin	{  border:orange solid;  border-width:thin; }

.medium	{  border:orange solid;  border-width:medium; }

.thick	{  border:orange solid;  border-width:thick; }

.trbl	{  border:green solid;  border-width:1px 4px 7px 10px; }

.tlrb	{  border:green solid;  border-width:1px 8px 4px; }

.tblr	{  border:green solid;  border-width:2px 8px; }

output

thin
medium
thick
上(1px)、右(4px)、下(7px)、左(10px)
上(1px)、左右(8px)、下(4px)
上下(2px)、左右(8px)

`height`屬性

非繼承屬性，設定區塊內容領域的高度。

○Win IE
○Firefox
○Opera
○Safari
○MC IE

屬性	適用元素	屬性值	說明
height	all(除表格元素、非置換元素)	長度百分比(%) auto(Default值) inherit	→ em、px等長度值(不可為負數) → 上層涵蓋區塊高度的百分比 → 隨區塊內的內容調整高度 → 強制繼承上層元素的屬性值

.height { width:400px;height:30px;border:5px orange solid; }

output

height屬性為指定內容領域的高度，不含框線的寬度。

`margin`屬性

非繼承屬性，設定區塊上下左右的邊界寬。可以設定1到4個值，以半形空白作區隔。1個值代表「上下左右」的邊界寬，2個值代表「上下」「左右」的邊界寬，3個值代表「上」「左右」「下」的邊界寬，4個值代表「上」「右」「下」「左」的邊界寬。

○Win IE
○Firefox
○Opera
○Safari
○MC IE

屬性	適用元素	屬性值	說明
margin margin-top margin-bottom margin-left margin-right	all(除表格元素、非置換元素)	長度百分比(%) auto(Default值) inherit	→ em、px等長度(Default值為"0") → 上層涵蓋區塊「寬度」的百分比 → 自動算出 → 強制繼承上層元素的屬性值

.auto	{margin-left:auto;margin-right:auto;}

.left	{margin-left:20px;margin-right:auto;}

.right	{margin-left:auto;margin-right:20px;}

.percent	{margin-left:50%;margin-right:auto;}

output

區塊元素置中
區塊元素離左邊界20px
區塊元素離右邊界20px
區塊元素離左邊界50%寬

`max-height`屬性

非繼承屬性，設定區塊元素的最大高度。可和設定最小高度的min-height屬性並用，限制區塊元素的最高和最小高度。區塊元素如果高於最高高度、低於最低高度時會自動縮放。

△Win IE
○Firefox
○Opera
○Safari
xMC IE

屬性	適用元素	屬性值	說明
max-height	all(除表格元素、非置換元素)	長度百分比(%) none(Default值) inherit	→ em、px等長度(Default值為"0") → 上層涵蓋區塊「高度」的百分比 → 沒有設限 → 強制繼承上層元素的屬性值

.limit	{  border:1px orange solid; max-height:50px}

output

504px x 367px的圖像縮放成69px x 50px(max-height)

`max-width`屬性

非繼承屬性，設定區塊元素的最大寬度。可和設定最小寬度的min-width屬性並用，限制區塊元素的最高和最小寬度。區塊元素如果寬於最高寬度、低於最低寬度時會自動縮放。

△Win IE
○Firefox
○Opera
○Safari
xMC IE

屬性	適用元素	屬性值	說明
max-width	all(除表格元素、非置換元素)	長度百分比(%) none(Default值) inherit	→ em、px等長度(Default值為"0") → 上層涵蓋區塊「寬度」的百分比 → 沒有設限 �� 強制繼承上層元素的屬性值

.limit	{  border:1px orange solid; max-width:100px;}

output

504px x 367px的圖像縮放成100px(max-width) x 73px

Window IE 6.0以下沒有對應，請用7.0以上閱覽。

`min-height`屬性

非繼承屬性，設定區塊元素的最小高度。可和設定最高高度的max-height屬性並用，限制區塊元素的最高和最小高度。區塊元素如果高於最高高度、低於最低高度時會自動縮放。

△Win IE
○Firefox
○Opera
○Safari
xMC IE

屬性	適用元素	屬性值	說明
min-height	all(除表格元素、非置換元素)	長度百分比(%) none(Default值) inherit	→ em、px等長度(Default值為"0") → 上層涵蓋區塊「高度」的百分比 → 沒有設限 → 強制繼承上層元素的屬性值

.limit	{  border:1px orange solid; min-height:30px;}

output

38px x 27px的圖像縮放成42pxx 30px(min-height)

`min-width`屬性

非繼承屬性，設定區塊元素的最小寬度。可和設定最大寬度的max-width屬性並用，限制區塊元素的最高和最小寬度。區塊元素如果寬於最高寬度、低於最低寬度時會自動縮放。

△Win IE
○Firefox
○Opera
○Safari
xMC IE

屬性	適用元素	屬性值	說明
min-width	all(除表格元素、非置換元素)	長度百分比(%) none(Default值) inherit	→ em、px等長度(Default值為"0") → 上層涵蓋區塊「寬度」的百分比 → 沒有設限 → 強制繼承上層元素的屬性值

.limit	{  border:1px orange solid; min-width:50px;}

output

38px x 27px的圖像縮放成50px(min-width) x 36px

Window IE 6.0以下沒有對應，請用7.0以上閱覽。

`padding`屬性

非繼承屬性，設定區塊上下左右的內邊界寬(padding)。可以設定1到4個值，以半形空白作區隔。1個值代表「上下左右」的內邊界寬，2個值代表「上下」「左右」的內邊界寬，3個值代表「上」「左右」「下」的內邊界寬，4個值代表「上」「右」「下」「左」的內邊界寬。

○Win IE
○Firefox
○Opera
○Safari
○MC IE

屬性	適用元素	屬性值	說明
padding padding-top padding-bottom padding-left padding-right	all(除表格元素、非置換元素)	長度百分比(%) auto(Default值) inherit	→ em、px等長度(Default值為"0") → 上層涵蓋區塊「寬度」的百分比 → 自動算出 → 強制繼承上層元素的屬性值

.padding {

	padding-left:20px;

	background-image:url('pc.gif');

	background-repeat:no-repeat;

output

常用於背景圖像和文字的調節。預留左內邊界20px寬，插入圖像。

`width`屬性

非繼承屬性，設定區塊內容領域的寬度。

○Win IE
○Firefox
○Opera
○Safari
○MC IE

屬性	適用元素	屬性值	說明
width	all(除表格元素、非置換元素)	長度百分比(%) auto(Default值) inherit	→ em、px等長度值(不可為負數) → 上層涵蓋區塊高度的百分比 → 隨區塊內的內容調整高度 → 強制繼承上層元素的屬性值

.width { width:400px;height:30px;border:5px orange solid; }

output

height屬性為指定內容領域的寬度，不含框線的寬度。