加入卡片內距
修改檔案:style.css
完成後看見:文字不再貼著卡片邊緣
CHAPTER 04 · PRACTICE WORKSPACE
完成有留白、邊框與圓角的技能卡片
TASK STATUS
修改檔案:style.css
完成後看見:文字不再貼著卡片邊緣
修改檔案:style.css
完成後看見:每個技能區塊有清楚卡片邊界
修改檔案:style.css
完成後看見:相鄰卡片之間保有一致空隙
WORKSPACE
已完成 TASK-02;先核對可見結果,再前往 TASK-03。
FOCUS TASK · TASK-03
比較:相鄰卡片之間的空隙是外部責任,文字與邊界之間的空間是內部責任。
現在做:先在 style.css 的 .skill-card 做一次最小對照:只改這個責任並重新整理/操作,接著依「比較相鄰卡片之間的空隙,確認上下間距一致。」重跑,記下前後差異。
預期:完成後能觀察到「相鄰卡片之間保有一致空隙」,並說出相鄰卡片之間的空隙是外部責任,文字與邊界之間的空間是內部責任。
證據:用前後截圖或口述比較「相鄰卡片之間保有一致空隙」,指出這個小型實驗如何證明相鄰卡片之間的空隙是外部責任,文字與邊界之間的空間是內部責任。
比較:同一組卡片要用一致規則建立節奏,不是每張卡片各自猜一個距離。
現在做:先在 style.css 的 .skill-card 做一次最小對照:只改這個責任並重新整理/操作,接著依「比較相鄰卡片之間的空隙,確認上下間距一致。」重跑,記下前後差異。
預期:完成後能觀察到「相鄰卡片之間保有一致空隙」,並說出同一組卡片要用一致規則建立節奏,不是每張卡片各自猜一個距離。
證據:用前後截圖或口述比較「相鄰卡片之間保有一致空隙」,指出這個小型實驗如何證明同一組卡片要用一致規則建立節奏,不是每張卡片各自猜一個距離。
完成條件:DONE-03:相鄰卡片之間保有一致空隙
把內容整理成清楚結構。
替結構安排外觀與空間。
從畫面線索找出問題來源。
CONTINUE
前往 Solution,依要求完成「設定卡片外距」。