加入卡片內距
修改檔案：style.css
完成後看見：文字不再貼著卡片邊緣
HTML
把內容整理成清楚結構。
CSS
替結構安排外觀與空間。
排錯
從畫面線索找出問題來源。
CHAPTER 04 · PRACTICE WORKSPACE
完成有留白、邊框與圓角的技能卡片
TASK STATUS
修改檔案：style.css
完成後看見：文字不再貼著卡片邊緣
修改檔案：style.css
完成後看見：每個技能區塊有清楚卡片邊界
修改檔案：style.css
完成後看見：相鄰卡片之間保有一致空隙
WORKSPACE
已完成 TASK-01；先核對可見結果，再前往 TASK-02。
FOCUS TASK · TASK-02
比較：border 畫出卡片邊界，border-radius 改變角落形狀；圓角不會取代邊框。
現在做：先在 style.css 的 .skill-card 做一次最小對照：只改這個責任並重新整理／操作，接著依「重新整理後確認每張卡片都有邊框與圓角。」重跑，記下前後差異。
預期：完成後能觀察到「每個技能區塊有清楚卡片邊界」，並說出border 畫出卡片邊界，border-radius 改變角落形狀；圓角不會取代邊框。
證據：用前後截圖或口述比較「每個技能區塊有清楚卡片邊界」，指出這個小型實驗如何證明border 畫出卡片邊界，border-radius 改變角落形狀；圓角不會取代邊框。
比較：border 會參與盒模型，outline 通常只提供外部視覺線索；用途不同。
現在做：先在 style.css 的 .skill-card 做一次最小對照：只改這個責任並重新整理／操作，接著依「重新整理後確認每張卡片都有邊框與圓角。」重跑，記下前後差異。
預期：完成後能觀察到「每個技能區塊有清楚卡片邊界」，並說出border 會參與盒模型，outline 通常只提供外部視覺線索；用途不同。
證據：用前後截圖或口述比較「每個技能區塊有清楚卡片邊界」，指出這個小型實驗如何證明border 會參與盒模型，outline 通常只提供外部視覺線索；用途不同。
完成條件：DONE-02：每個技能區塊有清楚卡片邊界
把內容整理成清楚結構。
替結構安排外觀與空間。
從畫面線索找出問題來源。
CONTINUE
前往 Checkpoint 2，依要求完成「加入邊框與圓角」。