07 盒子模式

簡介

盒子模式(Box model)在CSS中是一個很重要的觀念，用來描述一個元素是如何組成的，以下為盒子模式的樣式：





邊界(Margin)

邊界用來設定各個元素之間的距離，所以，我們可以對該四個邊逐一設定：

1. margin-top(上邊界)
2. margin-right(右邊界)
3. margin-bottom(下邊界)
4. margin-left(左邊界)

補充：

所有四個邊的邊界可以同時由margin屬性設定，而且，在這裡，順序非常重要(上、右、下、左)。它的語法如下：

margin: [上面邊界值] [右邊邊界值] [下面邊界值] [左邊邊界值]

範例：

<style>
#container {
margin-top:50px;
margin-right:100px;
margin-bottom:auto;
margin-left:100px;
border:1px solid;
}

#container2 {
 margin:50px 100px auto 100px;
 border:1px dashed;
}
</style>

<div id="container">
Margin Test
</div>

<hr>

<div id="container2">
Margin Test2
</div>



邊框(Border)

在CSS中常見的邊框屬性有以下幾種：

1. border-style


 CSS樣式         結果
 solid 實線
 dashed   虛線
 double 雙線
 dotted 點線
 groove     凹線 
 ridge 凸線
 inset 嵌入線
 outset 浮出線


2. border-width

可用值：thin(薄)、medium(中等)、thick(厚)、num px。

例:
border-width:9px
border-width:medium

3. border-color

例:
border-color:#0000FF
border-color:blue

4. border-top, right, bottom, left

例:
border-top-style:solid; border-bottom-style:dotted
border-top-style:solid; border-top-width:medium
border-left-style:solid; border-bottom-style:dashed; border-bottom-color:#00FF00

5. border

若四邊的邊框屬性都一樣，那我們可以用一個 border 屬性來描述，而不必四個邊都描述一次。另外，我們可以在同一行一次宣告邊框樣式、邊框寬度、以及邊框顏色。

例:
p { 
  border:#0000FF 5px solid; 
}

留白(Padding)

我們可以對該四個邊的留白逐一設定：

1. padding-top(上)
2. padding-right(右)
3. padding-bottom(下)
4. padding-left(左)

補充：

所有四個邊的留白可以同時由padding屬性設定，而且，在這裡，順序非常重要(上、右、下、左)。它的語法如下：

padding: [上面留白值] [右邊留白值] [下面留白值] [左邊留白值]

範例：

<style>
#show {
 padding-top:5px; 
 padding-right:3px; 
 padding-bottom:10px; 
 padding-left:20px; 
 border: 1px solid;
}

#show2 {
 padding:5px 3px 10px 20px;
 border:1px dashed;
}
</style>

<div id="show">
Padding Test
</div>

<hr />

<div id="show2">
Padding Test2
</div>


Comments