CHAPTER 04 · PRACTICE WORKSPACE

Box Model、class 與選取器

完成有留白、邊框與圓角的技能卡片

03 Checkpoint 2 2/3
  1. 01Starter讀懂作品骨架
  2. 02Checkpoint 1加入第一項能力
  3. 03Checkpoint 2累積第二項能力
  4. 04Solution核對完整結果

TASK STATUS

三項任務目前狀態

TASK-01已完成

加入卡片內距

修改檔案:style.css

完成後看見:文字不再貼著卡片邊緣

TASK-02已完成

加入邊框與圓角

修改檔案:style.css

完成後看見:每個技能區塊有清楚卡片邊界

TASK-03本階段處理

設定卡片外距

修改檔案:style.css

完成後看見:相鄰卡片之間保有一致空隙

WORKSPACE

本階段實作區

已完成 TASK-02;先核對可見結果,再前往 TASK-03。

FOCUS TASK · TASK-03

現在只處理:設定卡片外距

修改:style.css

完成後:相鄰卡片之間保有一致空隙

講解時展開:2 個小型比較

外距 vs 內距|相鄰卡片如何分開

比較:相鄰卡片之間的空隙是外部責任,文字與邊界之間的空間是內部責任。

現在做:先在 style.css 的 .skill-card 做一次最小對照:只改這個責任並重新整理/操作,接著依「比較相鄰卡片之間的空隙,確認上下間距一致。」重跑,記下前後差異。

看預期與證據

預期:完成後能觀察到「相鄰卡片之間保有一致空隙」,並說出相鄰卡片之間的空隙是外部責任,文字與邊界之間的空間是內部責任。

證據:用前後截圖或口述比較「相鄰卡片之間保有一致空隙」,指出這個小型實驗如何證明相鄰卡片之間的空隙是外部責任,文字與邊界之間的空間是內部責任。

一致空隙|先比較再定值

比較:同一組卡片要用一致規則建立節奏,不是每張卡片各自猜一個距離。

現在做:先在 style.css 的 .skill-card 做一次最小對照:只改這個責任並重新整理/操作,接著依「比較相鄰卡片之間的空隙,確認上下間距一致。」重跑,記下前後差異。

看預期與證據

預期:完成後能觀察到「相鄰卡片之間保有一致空隙」,並說出同一組卡片要用一致規則建立節奏,不是每張卡片各自猜一個距離。

證據:用前後截圖或口述比較「相鄰卡片之間保有一致空隙」,指出這個小型實驗如何證明同一組卡片要用一致規則建立節奏,不是每張卡片各自猜一個距離。

需要排錯時查看:任務循環(觀察 → 預測 → 實作 → 故障 → 驗收)
  1. A|觀察:在 Checkpoint 2 確認卡片內距、邊框與 16px 圓角已生效,接著觀察相鄰卡片仍上下貼合。
  2. B|預測:比較相鄰卡片之間的空隙,確認上下間距一致。
  3. C|實作:在 style.css 的 .skill-card 完成「設定卡片外距」,一次只處理本任務責任。
  4. D|故障:若結果不一致,先依原操作重現,再檢查 .skill-card 與 style.css,最後重跑原操作。
  5. E|驗收:相鄰卡片之間保有一致空隙

完成條件:DONE-03:相鄰卡片之間保有一致空隙

HTML

把內容整理成清楚結構。

CSS

替結構安排外觀與空間。

排錯

從畫面線索找出問題來源。

CONTINUE

繼續完成 TASK-03

前往 Solution,依要求完成「設定卡片外距」。

前往 Solution:完成 TASK-03