# CSS 18. CSS Box Model （重要)

### 何謂 box model:

- 開啟網頁時，打開右鍵－檢查:

可以發現一個類似盒子的模型圖，而裡面有幾個非常**重要**的屬性


#### 四個你一定要知道的屬性:

1. **content** - 元素本身
2. **padding** - 留白:

- padding 在下圖得狀態就是，白色方格(content)與綠色線條(boreder)之間的距離，就是內部產生留白，也就是 padding。


3. **border** - 框線:

- 在圖示上則是，綠色框線，也就是最外框。

4. **margin** - 邊界，例如有兩段文字，上下之間會產生一段 margin:

    <h1 style="background-color: blue">fubon guardians</h1>
    <h1 style="background: yellow">CTBC brothers</h1>

- 藍線與藍線之間的距離則是 margin


---

### box model 重要觀念:

- 所有的 HTML elements，在網頁裡面，都是一個箱子。

因為它們同時具備裡頭的以下屬性:

// width 
// height 
// content
// padding 
// border
// margin

###### tags: `2022 網頁開發全攻略教程 / CSS篇章 - box model`