你有沒有想過，為什麼一個 < div > 看起來像是一個方塊？
其實在 CSS 世界裡，所有元素都是一個「盒子」(Box)。
這個「盒子」就像積木，你要怎麼堆疊、怎麼排列，全靠 盒模型。

什麼是盒模型 (Box Model)？

每個 HTML 元素，都可以想像成有四層「外套」：

┌───────────────┐
│   margin      │  (外距)
│ ┌───────────┐ │
│ │  border   │ │  (邊框)
│ │ ┌───────┐ │ │
│ │ │padding│ │ │ (內距)
│ │ │       │ │ │
│ │ │content│ │ │ (內容：文字/圖片) 
│ │ └───────┘ │ │
│ └───────────┘ │
└───────────────┘

1. Content (內容區)

放文字、圖片的地方。
例如：width: 200px; height: 100px; 設定的就是內容大小。

2. Padding (內距)

內容跟邊框之間的空間。像衣服裡的「墊肩」。

p {
  padding: 20px;
}

👉 文字會離邊框更遠，看起來不擁擠。

3. Border (邊框)

外套的框線。

p {
  border: 2px solid black;
}

4. Margin (外距)

元素與元素之間的距離。像人與人之間的「安全距離」。

p {
  margin: 20px;
}

Padding vs Margin：怎麼分？

• Padding：內容跟自己邊框的距離。
• Margin：自己跟其他盒子的距離。

👉 如果把盒子想像成「一張桌子」：

• Padding = 桌子上放東西的留白
• Margin = 桌子跟隔壁桌的距離

Margin/ Padding 的寫法

1.四邊一樣

margin: 20px;
padding: 10px;

2.上下、左右

margin: 20px 10px;  /* 上下 20px，左右 10px */

3.上、左右、下

margin: 10px 20px 30px;

4.上、右、下、左 (順時針)

margin: 10px 15px 20px 25px;

5.單邊設定

margin-top: 10px;
margin-left: 20p

Block vs Inline 元素

排版的另一個關鍵：元素有兩種「性格」。

Block (區塊元素)

• 預設佔滿一整行
• 可以設定寬高
• 例如：div, p, h1-h6
👉 就像一塊積木，會自動換行。

Inline (行內元素)

• 跟其他元素擠在同一行
• 不能設定寬高（只能靠內容撐開）
• 例如：span, a, strong
👉 就像文字裡的一個字。

Inline-block (混合型)

• 跟別人同一行
• 又能設定寬高
👉 很常用在按鈕排版。

小範例：三張卡片排版

HTML：

<div class="card">卡片1</div>
<div class="card">卡片2</div>
<div class="card">卡片3</div>

CSS：

.card {
  display: inline-block; /* 可以水平排 */
  width: 150px;
  height: 100px;
  margin: 10px;
  padding: 20px;
  border: 2px solid #333;
  background: #f4f4f4;
}

👉 三張卡片就會乖乖排成一排，中間還會有距離。

Day 10 小結

今天我們學到：

• 盒模型 (Box Model) 的四層：Content、Padding、Border、Margin
• Padding vs Margin 的差別
• Block / Inline / Inline-block 的行為

掌握這些，你就能更精準控制「元素的間距 & 排版」！
明天，我們就來聊聊排版神器：Flexbox，讓你的網頁排版更聽話、更彈性~
我是Ting，謝謝你的收看，我們明天見吧！