STEP GUIDE · Solution

這個步驟要做什麼、改哪裡、怎麼看結果

這一步聚焦 TASK-03；下方只比較「Checkpoint 2 → Solution」的真實異動。

01

三項 Task 進度

TASK-01已完成

加入卡片內距

預計修改：style.css

完成後：文字不再貼著卡片邊緣

TASK-02已完成

加入邊框與圓角

預計修改：style.css

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

TASK-03本步驟處理

設定卡片外距

預計修改：style.css

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

02

HTML、CSS、JavaScript 與文件實際異動

展開檔案卡查看必要差異；只有程式碼區可以橫向捲動。

HTML本步驟無異動

檔案：index.html

修改前

前一步與本步驟沒有實質差異。

修改後

本步驟不需修改此語言。
CSS本步驟有異動

檔案：style.css

修改前

.skill-card { padding: 24px; border: 1px solid #b9c7bf; border-radius: 16px; background: white; }

修改後

.skill-card { margin-bottom: 16px; padding: 24px; border: 1px solid #b9c7bf; border-radius: 16px; background: white; }
JavaScript本練習未使用

檔案：script.js

修改前

本練習沒有這個檔案。

修改後

本步驟不需修改此語言。
README／其他文件本練習未使用

檔案：README.md

修改前

本練習沒有這個檔案。

修改後

本步驟不需修改此語言。
03

怎麼看到結果

  1. 準備

    先重新整理本階段頁面，記住目前畫面，再開始操作。

  2. 操作

    比較相鄰卡片之間的空隙，確認上下間距一致。

  3. 預期

    相鄰卡片之間保有一致空隙
Solution TASK-03

設定卡片外距

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

HTML

把內容整理成清楚結構。

CSS

替結構安排外觀與空間。

排錯

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