留白不是空著，而是在說明內容邊界

卡片像寄送包裹：內容是商品、padding 是防撞泡棉、border 是紙箱、margin 是兩個紙箱之間的搬運空間。

本章要解決：技能內容像三段散文，沒有可辨識邊界，卡片內外空間也混在一起。

接住上一章：保留已完成的背景與文字規則，只新增卡片邊界和留白。

1. padding 在邊框內，負責內容與邊界的呼吸；margin 在邊框外，負責元素彼此的距離。
2. 邊框讓盒子的責任可見，圓角只改外觀，不會代替留白。
3. 三張卡片有共同責任時，用同一個 class 修改，不能只修畫面上第一張。

課堂刻意錯誤：把 margin 加在卡片內的文字，而不是 .skill-card，觀察文字移動但外框仍黏在一起。

1. 用元素檢查器選中真正要修改的卡片。
2. 先看邊框在哪裡，確認空白要在框內還是框外。
3. 在 Box Model 圖確認目前數值屬於 padding 或 margin。
4. 確認所有卡片都有 .skill-card，一次只改一個值比較。

1. 01 先讀任務 Starter 圈出框內與框外兩種空間。 累積完成 0／3 個任務 開始練習 →
2. 02 完成第一項 Checkpoint 1 完成 TASK-01。 累積完成 1／3 個任務 繼續第一步 →
3. 03 累積第二項 Checkpoint 2 再完成 TASK-02。 累積完成 2／3 個任務 繼續第二步 →
4. 04 核對完成品 Solution 只補 TASK-03。 累積完成 3／3 個任務 查看完整結果 →

✓網頁版答案位置對照卡住時先完成 Checkpoint 2，再查看每個 TASK 對應的檔案與位置。→

截圖三張技能卡與其中一張的 DevTools Box Model，口頭指出框內和框外空白。

• 01 三張卡片都有相同內距、邊框與圓角。 已完成
• 02 卡片外距一致，沒有用 br 撐空間。 已完成
• 03 能分辨 padding 與 margin 的畫面責任。 已完成
• 04 沒有只修改單一卡片或使用 inline style。 已完成

下一章：把盒模型概念放大成首頁 Hero 舞台，處理照片上的文字可讀性。

下一步：前往第 05 章「Hero、背景、遮罩與偽元素」，帶著本章輸出繼續累積作品。