---
# System prepended metadata

title: '[CSS] Box Model '
tags: ['#CSS']

---

# [CSS] Box Model 
![Q](https://hackmd.io/_uploads/BkYNuKvFR.jpg =60%x)

## 🔅 **Content**
##### 🔸網元素本身呈現的內容
> ####  網頁元素產生的容器通常都會有<font color="#f00">「寬度與高度」</font>

##### 🔸網頁中大多數的元素都可以調整寬度和高度


| 樣式屬性     | 說明                                 |
| ------------ |:------------------------------------ |
| `width`      | 寬度                                 |
| `height`     | 高度                                 |
| `max-width`  | 最大寬度                             |
| `min-width`  | 最小寬度                             |
| `max-height` | 最大高度                             |
| `min-height` | 最小高度                             |
| `inline `    | x不能調整                            |
| `auto `      | 內容自動撐開，或根據內容寬高比例換算 |


## 🔅 **padding**
##### 🔸網頁元素容器由內而外的第一層就是「內邊距」
> ####  `padding` 是元素裡的「內邊距」，也就是元素由內而外，<font color="#f00">緊連著內容的第一層</font>，網頁中所有元素的內邊距 `padding 預設都是 0`

```css
p {
  padding: 25px 50px 75px 100px; /*上右下左*/           
}

p {
  padding: 25px 50px 75px; /*上(左右)下*/
}

p {
  padding: 25px 50px; /*(上下)(左右)*/
}

p {
  padding: 25px; /*(上右下左)*/
}
```
##### 🔸單一內邊距的樣式屬性，單獨設定上下左右數值


| 單一內邊距樣式   | 說明       |
| ---------------- | ---------- |
| `padding-top `   | 上方內邊距 |
| `padding-right`  | 右側內邊距 |
| `padding-bottom` | 下方內邊距 |
| `padding-left`   | 左側內邊距 |
| `auto `            | 0          |


## 🔅 **border**
##### 🔸邊框是網頁元素內邊距與外邊距之間的線段
> ####  `border` 是元素裡的「邊框」，也就是元素由內而外，在<font color="#f00">內邊距和外邊界中間的的線段</font>，`網頁中大部分元素 border 預設都是 none`，因此大部分元素都不會有邊框

```css
p {
  border: 25px 50px 75px 100px; /*上右下左*/           
}

p {
  border: 25px 50px 75px; /*上(左右)下*/
}

p {
  border: 25px 50px; /*(上下)(左右)*/
}

p {
  border: 25px; /*(上右下左)*/
}
```
##### 🔸單一邊框的樣式屬性，單獨設定上下左右的邊框


| 單一內邊距樣式  | 說明                   |
| --------------- | ---------------------- |
| `border-top`    | 上方邊框               |
| `border-right`  | 右側邊框               |
| `border-bottom` | 下方邊框               |
| `border-left`   | 左側邊框               |
| `border-width`  | 邊線的寬度             |
| `border-color`  | 邊線的顏色             |
| `none`          | 沒有邊框，邊框寬度為 0 |
| `hidden`        | 隱藏邊框，邊框寬度為 0 |
| `solid`         | 實線                   |

##### 🔸邊框圓角 `border-radius `是邊框的特殊樣式，透過不同的半徑圓角，調整四個角落的圓角
> #### `border-radius` 設定「左上、右上、右下、左下」四個角落的邊框`「圓角半徑」`</br>預設圓角半徑為 0，半徑從「容器邊框外緣往內計算」
```css
p {
  border-radius: 25px 50px 75px 100px; /*左上 右上 右下 左下*/           
}

p {
  border-radius: 25px 50px 75px; /*左上 (右上左下) 右下*/
}

p {
  border-radius: 25px 50px; /*((左上右下) (右上左下)*/
}

p {
  border-radius: 25px; /*(上右下左)*/
}
```


## 🔅 **margin**
##### 🔸在元素的外面，還有一層使用 margin 控制樣式的「外邊界」
> ####  `margin` 是元素模型裡的<font color="#f00">「外邊界」</font>，也就是在網頁元素容器主體外面延伸出去的空間

```css
p {
  margin: 25px 50px 75px 100px; /*上右下左*/           
}

p {
  margin: 25px 50px 75px; /*上(左右)下*/
}

p {
  margin: 25px 50px; /*(上下)(左右)*/
}

p {
  margin: 25px; /*(上右下左)*/
}
```
##### 🔸單一外邊界的樣式屬性，單獨設定上下左右數值


| 單一內邊距樣式  | 說明                   |
| --------------- |:---------------------- |
| `margin-top`    | 上方外邊界             |
| `margin-right`  | 右側外邊界             |
| `margin-bottom` | 下方外邊界             |
| `margin-left`   | 左側外邊界             |
| `auto`          | 預設外邊界值           |
| `hidden`        | 隱藏邊框，邊框寬度為 0 |
| `solid`         | 實線                   |




