# #13 CSS 盒子模型 (Box Model)：border-box & content-box

> ⚠️ 本篇文章已搬遷至 [css.im1010ioio.dev](https://css.im1010ioio.dev/layout/css-box-model/)**，請至新站閱讀完整版**。

---

在網頁中，每個 HTML 元素都是一個方塊，我們又稱之為「盒子 Box」。

這個盒子包含了它的內容、內部間距、邊框線與外部間距，光用說的有點抽象，讓我們以 Facebook 的一篇貼文作為例子。FB 的貼文是卡片式設計，這個卡片 Box 裡面會有：

> #### ↓ 今日學習重點 ↓
> 
> * 了解網頁上，構成一個 Box 盒子的內容
>     
> * 了解 CSS border-box & content-box 有何不同
>     

---

## 構成 box 的內容

### 1\. content (內容)

Box 的主要內容物的區域。

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1695653204247/913fb38f-c117-4e52-9888-af40fb07a06b.png align="center")

### 2\. padding (內部間距)

通常一張卡片會設定一些 padding (內部邊距)，讓畫面不要太緊迫。

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1695653221587/1c5cd531-6c41-4867-96d4-b836ff997c0a.png align="center")

Padding (內部間距) 共有四個方向：上、下、左、右，可以設定…