# DAY5 - box model 盒模型的概念

### 盒模型:

- 假設今天有一個盒子，寬高皆為: 300px


- 從 box model 來看確實也是 300x300


---

### 假如我加上 padding 呢?

- padding-top:

.box {
  padding-top: 30px;
  width: 300px;
  height: 300px;
  background: #000;
}

- 此時你會發現，變成了 300x330了，原因是為什麼?


- 盒模型，`padding` 上方增加了 30px，進而影響了整個 box 的高度計算。


---

### 思考一下:

- 假設，我改成 `padding: 50px`，box 的寬度會變成多少?

.box {
  padding: 50px;
  width: 300px;
  height: 300px;
  background: #000;
}


- A: box 本身是 300px，但因為**上右下左都推擠了** 50px

故等於 = 400 x 400 px


### 如再加上 border 框線的話呢?

- 目前 box 因為 padding 的關係，已經變成了 400px

這時候加上:上右下左的 10 px solid，總長寬會變成多少?

.box {
  border: 10px solid blue;
  padding: 50px;
  width: 300px;
  height: 300px;
  background: #000;
}



- A: (400+20) x (400+20) = 420

由此可知，`border` + `padding` + `elements` = **該物件的總長寬**。

### margin 不論寫多少，都不影響盒模型本身的長寬。

- margin 只提供與物件之間的間隔，但不會計算在物件的總長度內。

### 拿掉高度，讓容器內的標籤 or padding 自適應產生高度做法:

- 先拿掉 height:

.box {
  border: 10px solid blue;
  padding: 50px;
  width: 300px;
  background: #000;
}

- 拿掉後，高度剩下: 120px，注意看一下裡面包含了什麼:

padding 上下 50+50 = 100px

border 上下 10+10 = 20px

故高度為: `120px`


###### tags: `Re:0 前端工程師之路 - HTML CSS 篇章`