找到樣式來源，再調整留白

沿用自己的青禾三頁網站與APPA紫綠色票。正常來源先保留副本；只在自己的student-work/portfolio修改。

1. 選到畫面上的元素

在桌面瀏覽器開啟自己的index.html，對主標使用「檢查」或瀏覽器開發者工具。選取首頁.hero裡的h1，再看Styles（樣式）與Computed（計算後樣式）；名稱會因瀏覽器語言不同。

• Styles：哪些CSS規則選到它、哪一行被覆蓋、檔案與行號。
• Computed：現在真的套用多少字級、行高、內距。
• 盒模型：內容、padding、border、margin的位置。

只讀CSS第一行不能證明它生效。先確認開的是自己的檔案，儲存後再重新整理。

2. 把需求寫成檢查表

1.2是字級的倍數；Computed可能顯示換算後px，例如48px字級的行高57.6px，不能把正常換算當成錯誤。42ch也是最大寬度，不保證每行剛好42個中文字。

3. 親手比較內距與外距

第二關先在完整CSS中找到桌面與窄版的.hero，只把padding-block改為32px。不要誤改APPA容器的padding、gap或margin。儲存、重新整理，在兩種寬度核對實際值。

原本服務與作品卡片都共用24px內距。下一份Prompt只把服務卡片改32px、服務標題改24px，作品卡片仍為24px；必須找到.service-card自己的規則，不能直接把共享規則全部改掉。

4. Prompt怎麼提供證據

在Cursor開啟自己的portfolio，用@附三頁HTML與完整styles.css；把需求表、寬度與實際計算值貼在內建AI對話，再貼當關Prompt。不要只附想改的一條規則，後方覆蓋與媒體查詢可能才是原因。

先閱讀差異，再儲存、操作與記錄。ChatGPT備援要重新提供實際檔案內容；沒有做過的操作保持待完成。

5. 保存自己的小版本

依第4堂已學方式親手查看git status、git diff -- styles.css。只將本堂相關修改保存到自己的練習儲存庫，不操作教材原件、不讓AI代提交、不推送。記錄修改範圍與實際結果，不能用參考版代替自己完成。