LESSON-05｜CSS 基礎：盒模型與間距

先理解：這堂課解決什麼問題？

先在 index.html 建立三張服務卡片，再觀察 padding、border 與 width 如何改變實際盒子；最後用 box-sizing 修正 390px 手機畫面的水平溢位。

本堂要完成：完成三張語意服務卡片，能解釋四層盒模型與 box-sizing，並讓卡片在 390px viewport 不產生水平捲軸。

學習邊界：先完成「用 content、padding、border、margin 與 box-sizing 控制服務卡片尺寸」，不提前引入尚未教過的框架或建置工具。

先備知識與操作環境

本堂先備：先在 index.html 建立三張服務卡片，再觀察 padding、border 與 width 如何改變實際盒子；最後用 box-sizing 修正 390px 手機畫面的水平溢位。需要的檔案是 index.html、.service-list、.service-card、style.css。若尚未理解這些位置，先開啟 README 的最小實驗，再開始階段練習。

檔案位置：先找到 index.html、.service-list、.service-card、style.css，再從本頁的最小實驗開始。
瀏覽器：開啟最小實驗與階段頁；每次修改後儲存並重新整理。
DevTools：依本堂內容使用 Elements、Styles、Computed、Console 或 Network，記下第一個可觀察證據。
操作習慣：每次只修改一個檔案或一個責任，先預測、再操作、最後驗收。

先做最小實驗：先看見結果

這不是期末網站，而是一個可以直接看到本堂核心結果的最小實驗。先完成一次操作，再回到檔案和名詞卡對照。

開啟本堂最小實驗

入口：開啟 examples/minimal.html。
操作：以 390px viewport 開啟 examples/minimal.html，分別選取 content-box 與 border-box，從 Computed／Box Model 讀取 width、padding、border，再把第一張盒子的 class 改成 border-box 重做一次。
預期：content-box 的總寬度會把 padding 與 border 另外加上去，可能造成水平溢位；border-box 的宣告寬度包含 padding 與 border，會留在父層內。
重設：重新整理 examples/minimal.html，DevTools Elements 的暫時修改會清除。

第一個檢查位置：先確認目前入口是 examples/minimal.html，並在 Elements 找到 .content-box 與 .border-box；不要先改 CSS。
成功證據：content-box 的總寬度會把 padding 與 border 另外加上去，可能造成水平溢位；border-box 的宣告寬度包含 padding 與 border，會留在父層內。若不同，先檢查：先確認目前入口是 examples/minimal.html，並在 Elements 找到 .content-box 與 .border-box；不要先改 CSS。

學生練習流程

依序完成每一張卡；目前只聚焦一個步驟，先操作，再用可觀察證據確認結果。

1
最小實驗

先閱讀本頁的問題、檔案地圖、名詞卡與最小例子。
2
Step 2

自己回答互動問答 4 題，再展開解析。
3
最小實驗 2

開啟最小實驗，實際操作一次並記下證據。
4
Starter

把 Starter 複製到自己的工作資料夾，照 3 張微步驟卡逐一完成；每一步都要看到結果再繼續。
5
Checkpoint

前往 Checkpoint，只處理 1 個本堂核心缺口；先預測，再用指定證據驗收。
6
Solution

前往 Solution，先看逐檔差異與修改原因，再決定要不要把完整內容帶回自己的檔案。
7
變體驗收

完成情境變體與獨立挑戰，留下檔案位置、操作、結果與驗收證據，並閱讀下一堂銜接：字型與色彩：下一堂會在尺寸穩定後處理文字可讀性與品牌視覺。

檔案地圖：每個位置負責什麼？

先不要急著背檔名；請把檔案位置和責任連起來。你在階段頁會看到同一份檔案的可執行版本。

index.html首頁入口：呈現商家第一印象與主要 CTA。
.service-list服務清單 class：控制多筆服務項目的排列方式。
.service-card服務卡片 class：控制每張服務資訊卡的共用樣式。
style.cssCSS 樣式檔：放置本堂「用 content、padding、border、margin 與 box-sizing 控制服務卡片尺寸」相關的版面規則。

先學會這些詞

先從名詞、英文與白話意思開始；每次只展開一張名詞卡，再對照正式定義、範例與驗收證據。專業術語、語法、檔案路徑會使用不同樣式。第一次遇到術語時，先回到這裡，不要靠猜。

本堂 13 個詞先選一組，再展開需要的名詞卡；每次只保留目前的學習焦點。

contentcontent area 白話意思：元素真正放文字或子元素的核心內容區。展開查看正式定義、範例與驗收證據

正式定義: 盒模型中承載元素內容的區域；width 在預設 content-box 下只指定這個區域。
什麼時候用: 要解釋卡片為什麼沒有把內距與邊框算進內容寬度時。
最小範例: <article class="service-card">卡片內容</article>。
可觀察證據: DevTools Box Model 中間的 content 尺寸，以及 Elements 的子元素。
容易混淆: 和整個元素的外框混淆；元素總寬度還可能包含 padding 與 border。

paddingpadding 白話意思：內容和邊框之間的內側留白。展開查看正式定義、範例與驗收證據

正式定義: 盒模型中包住 content、位於 content 與 border 之間的內距區域。
什麼時候用: 文字貼著邊框，需要增加卡片內部空間時。
最小範例: .service-card { padding: 1.25rem; }。
可觀察證據: DevTools Box Model 的 padding 區域，以及文字和邊框之間的距離。
容易混淆: 和 margin 混淆；padding 在元素裡面，margin 在元素外面。

borderborder 白話意思：包住內距與內容的邊框。展開查看正式定義、範例與驗收證據

正式定義: 盒模型中位於 padding 外側、可設定寬度、樣式與顏色的邊界區域。
什麼時候用: 要讓卡片有清楚邊界，或觀察邊框如何增加實際尺寸時。
最小範例: .service-card { border: 1px solid #b9cddd; }。
可觀察證據: DevTools Box Model 的 border 區域，以及畫面上的卡片邊界。
容易混淆: 和 outline 混淆；border 參與盒模型尺寸，outline 通常不佔版面空間。

marginmargin 白話意思：元素外面和其他元素之間的外側留白。展開查看正式定義、範例與驗收證據

正式定義: 盒模型中位於 border 外側、用來分隔元素與周圍空間的區域。
什麼時候用: 要讓整個區塊和鄰近元素保持距離時。
最小範例: .page-shell { margin: 2rem auto; }。
可觀察證據: DevTools Box Model 的 margin 區域，以及元素和周圍的距離。
容易混淆: 和 padding 混淆；margin 不會讓內容離自己的邊框變遠。

widthwidth 白話意思：告訴瀏覽器元素要有多寬。展開查看正式定義、範例與驗收證據

正式定義: CSS 用來設定元素寬度的 property；在 content-box 下預設只代表 content width。
什麼時候用: 要控制卡片在父層中可使用的水平尺寸時。
最小範例: .service-card { width: 100%; }。
可觀察證據: Computed 的 width、Box Model 的 content 數值與元素實際右邊界。
容易混淆: 和 viewport 寬度混淆；width 是元素規則，viewport 是可視範圍。

box-sizingbox-sizing 白話意思：決定 width 和 height 要怎麼計算盒子。展開查看正式定義、範例與驗收證據

正式定義: 指定元素的 width／height 是否只套用 content，或包含 padding 與 border 的 CSS property。
什麼時候用: 固定寬度的卡片加入內距與邊框，必須避免總寬度超出父層時。
最小範例: .service-card { box-sizing: border-box; }。
可觀察證據: Computed 的 box-sizing，以及 390px viewport 是否仍有水平捲軸。
容易混淆: 和 overflow 混淆；box-sizing 修正計算方式，overflow 只處理超出後的顯示。

content-boxcontent-box 白話意思：width 只算內容，padding 和 border 會另外加上去。展開查看正式定義、範例與驗收證據

正式定義: box-sizing 的預設值；宣告的 width 與 height 只套用 content area。
什麼時候用: 要故意重現卡片溢位，理解 width:100% 加內距後變寬時。
最小範例: .service-card { box-sizing: content-box; width: 100%; padding: 1rem; }。
可觀察證據: Computed 顯示 content-box，且總實際寬度可能大於父層。
容易混淆: 和 border-box 混淆；差異在 width 是否包含 padding 與 border。

border-boxborder-box 白話意思：width 包含內容、padding 和 border 的總盒子。展開查看正式定義、範例與驗收證據

正式定義: box-sizing 的值；宣告的 width／height 會包含 content、padding 與 border。
什麼時候用: 卡片需要在父層內維持指定寬度，尤其是窄版 viewport 時。
最小範例: .service-card { box-sizing: border-box; width: 100%; }。
可觀察證據: Computed 顯示 border-box，且 390px 下文件沒有水平溢位。
容易混淆: 和把 overflow 隱藏混淆；border-box 直接修正尺寸計算，能保留內容。

gapgap 白話意思：父層子元素之間一致的間距。展開查看正式定義、範例與驗收證據

正式定義: Grid 或 Flex container 用來設定子元素之間空間的 CSS property。
什麼時候用: 多張卡片需要一致間距，又不想讓每張子卡自己計算 margin 時。
最小範例: .service-list { display: grid; gap: 1rem; }。
可觀察證據: 選取 .service-list 的 Computed，確認 display:grid 與 gap。
容易混淆: 和 margin 混淆；gap 由父層管理子元素之間的空間。

viewportviewport 白話意思：瀏覽器目前用來顯示網頁的可視範圍。展開查看正式定義、範例與驗收證據

正式定義: 使用者代理程式呈現文件內容的視窗區域；本堂以 390px 作為窄版驗收基準。
什麼時候用: 要確認卡片在手機寬度仍可見、可操作且沒有水平捲軸時。
最小範例: 在 DevTools 裝置模式設定 viewport width 為 390px。
可觀察證據: 畫面寬度、水平捲軸，以及 clientWidth 與 scrollWidth 的比較。
容易混淆: 和元素 width 混淆；viewport 是外部可視範圍，元素 width 是 CSS 尺寸規則。

remroot em 白話意思：跟著根元素字體大小換算的相對單位。展開查看正式定義、範例與驗收證據

正式定義: 以根元素 font-size 為基準計算長度的 CSS unit。
什麼時候用: 要設定 padding、margin 或 gap，又希望尺寸保持一致比例時。
最小範例: padding: 1.25rem 會依根元素字體大小換算。
可觀察證據: Computed 顯示換算後的 px 值，修改根字體大小後間距會跟著變。
容易混淆: 和 em 混淆；rem 看 root，em 通常看目前元素的字體大小。

overflowoverflow 白話意思：內容超出盒子時要怎麼處理。展開查看正式定義、範例與驗收證據

正式定義: 控制元素內容超出盒模型範圍時是否顯示、裁切或產生捲軸的 CSS property。
什麼時候用: 需要判斷水平捲軸是尺寸根因，或要處理真的需要滾動的內容時。
最小範例: document.documentElement.scrollWidth > document.documentElement.clientWidth 可檢查文件橫向溢出。
可觀察證據: 390px viewport 的水平捲軸，以及 scrollWidth 與 clientWidth 的比較。
容易混淆: 和 box-sizing 混淆；overflow 描述超出後的呈現，不能取代正確計算。

ComputedComputed styles 白話意思：瀏覽器最後真正採用的 CSS 值。展開查看正式定義、範例與驗收證據

正式定義: DevTools 顯示元素經過 cascade、繼承與瀏覽器預設後的最終計算樣式。
什麼時候用: 規則很多、值被覆蓋，或需要確認 box-sizing、padding 與 width 最後是多少時。
最小範例: 在 DevTools Computed 面板找到 box-sizing: border-box。
可觀察證據: 選取元素後 Computed 顯示的最終值，以及 Box Model 的尺寸。
容易混淆: 和 Styles 混淆；Styles 看規則來源，Computed 看最後採用的值。

最小例子：先看懂，再複製

這段只保留本堂第一個微成果。先預測結果，再逐行讀；完整檔案請開啟下方最小實驗。

<article class="service-card">
  <h3>到府整理</h3>
  <p>協助整理居家空間。</p>
</article>
<article class="service-card">
  <h3>定期維護</h3>
  <p>建立穩定的維護節奏。</p>
</article>
<article class="service-card">
  <h3>到府諮詢</h3>
  <p>先釐清需求再選方案。</p>
</article>

Live Lab：逐段讀碼與驗證

每一步只回答五件事：為什麼做、改哪裡、會看到什麼、用什麼證據確認、卡住先查什麼。

Step 1
先在 HTML 建立三張服務卡片

目的
先建立 CSS 會套用的實際 DOM，分清楚 HTML 結構與 CSS 外觀。

修改位置
index.html 的 .service-list
在 .service-list 裡加入三個 article，每個都有 .service-card、h3 與 p。

預期結果
Elements 看到一個 .service-list 和三個 .service-card；畫面出現三張尚未完成樣式的服務卡片。

驗收證據
Elements 展開 .service-list，數出 3 個 article，確認每張都有 h3 與 p。

卡住先查
只檢查 .service-list 的子元素數量與 class 拼字，不要先改 CSS。
Step 2
加入 width、padding 與 border，先看 content-box

目的
把 content、padding 與 border 在 Box Model 中看見，先建立可以重現的溢位案例。

修改位置
style.css 的 .service-card
加入 width:100%、padding 與 border，但暫時不要加入 box-sizing。

預期結果
卡片有內距與邊框；在 390px 可能出現水平捲軸，因為 content-box 的 width 只代表 content。

驗收證據
選取一張卡片，在 Computed／Box Model 讀到 width、padding、border、box-sizing:content-box。

卡住先查
先只看一張 .service-card 的 Computed，不要一次檢查所有卡片。
Step 3
由父層用 Grid 與 gap 管理卡片間距

目的
分辨父層 gap 與子元素 margin 的責任，讓多張卡片的間距一致。

修改位置
style.css 的 .service-list
在 .service-list 加入 display:grid 與 gap:1rem。

預期結果
三張卡片之間出現一致間距；父層 Computed 顯示 display:grid 與 gap。

驗收證據
選取 .service-list，Computed 顯示 display:grid、gap:16px，畫面三張卡片間距一致。

卡住先查
先選父層 .service-list，確認 display 與 gap，再檢查子元素。
Step 4
用 border-box 修正窄版水平溢位

目的
讓宣告的 width 包含 padding 與 border，修正 content-box 造成的尺寸根因。

修改位置
style.css 的 .service-card
只加入 .service-card { box-sizing: border-box; }，再重新整理並比較前後。

預期結果
390px viewport 沒有水平捲軸；Computed 顯示 border-box，padding 與 border 仍然可見。

驗收證據
Computed 的 box-sizing 為 border-box，且 document.documentElement.scrollWidth <= document.documentElement.clientWidth。

卡住先查
先選取 .service-card 讀 box-sizing，再看 390px 下是否仍有水平捲軸。
Step 5
把盒模型對照搬到最小實驗

目的
用一個不含課程階段標記的純 HTML／CSS 範例，重新驗證 content-box 與 border-box 的差異。

修改位置
examples/minimal.html
把第一張盒子的 class 從 content-box 改成 border-box，再比較總寬度與水平溢位。

預期結果
只修改 class 就能看出 width 是否包含 padding 與 border；重新整理可以還原實驗。

驗收證據
兩張盒子的 Computed、Box Model、390px 畫面與修改 class 前後的比較紀錄。

卡住先查
先確認 Elements 的 class，接著只看 Computed 的 box-sizing。
Step 6
完成變體與離場回顧

目的
把同一套盒模型責任轉移到價格卡，並用證據說明每一層空間由誰負責。

修改位置
index.html、style.css
把三張卡片改成三種方案價格卡，只替換文字內容，保留 .service-list、.service-card、gap 與 border-box。

預期結果
內容替換後，三張卡片仍有一致盒模型、父層間距、清楚 focus，390px 沒有水平捲軸。

驗收證據
修改檔案清單、三個 .service-card、Computed、390px、Tab focus 與變體畫面。

卡住先查
最後只檢查五件事：3 張卡片、gap、border-box、無水平捲軸、Tab focus。

操作層級Live Lab 段落導覽：切換六個實驗步驟

讀碼順序：先找入口，再找被引用的檔案，最後用畫面、DOM、Console、Network 或資料結果驗證。

互動問答

先回答目前這一題，再展開解析；完成後按下一題，讓每一次回答都回到檔案或瀏覽器完成驗證。

Q1概念理解「content（content area）」在本堂要解決什麼問題？本題線索：content；回到名詞卡與 DevTools Box Model 中間的 content 尺寸，以及 Elements 的子元素。展開解析收合解析

白話解析：

元素真正放文字或子元素的核心內容區。正式來說，盒模型中承載元素內容的區域；width 在預設 content-box 下只指定這個區域。

對照位置：

回到名詞卡「content」，再看 DevTools Box Model 中間的 content 尺寸，以及 Elements 的子元素。

預期觀察：

你應該能用自己的話說出：要解釋卡片為什麼沒有把內距與邊框算進內容寬度時。

常見錯誤：

不要只回答「它是content」；那是重複名詞，不是說明責任。

立即驗證：

開啟 examples/minimal.html，依序做「以 390px viewport 開啟 examples/minimal.html，分別選取 content-box 與 border-box，從 Computed／Box Model 讀取 width、padding、border，再把第一張盒子的 class 改成 border-box 重做一次。」並記下畫面或工具證據。

Q2程式碼閱讀修改指定規則後，你預測畫面會看到什麼？本題線索：index.html 的 .service-list；要修改：在 .service-list 裡加入三個 article，每個都有 .service-card、h3 與 p。；觀察：Elements 展開 .service-list，數出 3 個 article，確認每張都有 h3 與 p。展開解析收合解析

白話解析：

先看檔案責任，再預測結果。這一步的目的：先建立 CSS 會套用的實際 DOM，分清楚 HTML 結構與 CSS 外觀。

對照位置：

對照 Live Lab Step 1，位置是 index.html 的 .service-list；範例內容：<article class="service-card"> <h3>到府整理</h3> <p>協助整理居家空間。</p> </article> <article class="service-card"> <h3>定期維護</h3> <p>建立穩定的維護節奏。</p> </article> <article class="service-card"> <h3>到府諮詢</h3> <p>先釐清需求再選方案。</p> </article>

預期觀察：

Elements 看到一個 .service-list 和三個 .service-card；畫面出現三張尚未完成樣式的服務卡片。

常見錯誤：

如果只改了檔案但沒有結果，先不要重寫全部；只檢查 .service-list 的子元素數量與 class 拼字，不要先改 CSS。

立即驗證：

實際操作後檢查 Elements 展開 .service-list，數出 3 個 article，確認每張都有 h3 與 p。。

Q3概念比較「content」和「padding」在本堂的責任有什麼不同？本題線索：比較 content 與 padding；操作位置：style.css 的 .service-card 展開解析收合解析

白話解析：

content：元素真正放文字或子元素的核心內容區。；padding：內容和邊框之間的內側留白。

對照位置：

對照兩張名詞卡的正式定義：盒模型中承載元素內容的區域；width 在預設 content-box 下只指定這個區域。／盒模型中包住 content、位於 content 與 border 之間的內距區域。

預期觀察：

你應該能指出兩者分別出現在哪個檔案或工具，以及哪一個結果會改變。

常見錯誤：

不要把「改變畫面」當成所有技術的責任；先說清楚誰負責結構、呈現、行為或驗收。

立即驗證：

在 style.css 的 .service-card 做「加入 width:100%、padding 與 border，但暫時不要加入 box-sizing。」，再用選取一張卡片，在 Computed／Box Model 讀到 width、padding、border、box-sizing:content-box。比較前後差異。

Q4除錯驗收如果完成操作後結果不對，你會先從哪一個證據開始查？本題線索：index.html、style.css；第一個檢查位置：修改檔案清單、三個 .service-card、Computed、390px、Tab focus 與變體畫面。展開解析收合解析

白話解析：

先描述症狀，再提出一個最小假設。本堂常見錯誤是：為了讓價格卡好看而新增未教的框架、固定超大寬度，或刪除鍵盤 focus。

對照位置：

對照最後一段 Live Lab：index.html、style.css；檢查方式：最後只檢查五件事：3 張卡片、gap、border-box、無水平捲軸、Tab focus。

預期觀察：

你要能指出一個具體位置，而不是一次修改很多檔案。

常見錯誤：

不要先清快取、重裝工具或複製 Solution；先查看第一個可觀察錯誤。

立即驗證：

重新操作並留下「症狀、證據、假設、單一修正、結果」五項紀錄。

常見誤解

看到畫面沒有變化，不代表程式沒執行；先確認檔案、路徑、元素與狀態證據。
能複製 Solution 不代表理解；請先說出修改哪個檔案、預期哪個結果、用什麼證據確認。
本堂只使用既定的 HTML、CSS、JavaScript、Vue CDN、Apps Script mock 與 Cloudflare Pages 驗收範圍。

本堂任務與驗收

完成三張語意服務卡片，能解釋四層盒模型與 box-sizing，並讓卡片在 390px viewport 不產生水平捲軸。

能用 3 個 .service-card 留下可重現證據。
能用 Computed 的 padding／border／box-sizing 留下可重現證據。
能用父層 gap 留下可重現證據。
能用 390px 無水平捲軸留下可重現證據。
能用鍵盤 focus 留下可重現證據。
Starter、Checkpoint、Solution 的入口都能開啟並知道三者差異。
遇到問題時能先寫出症狀，再檢查一個最小假設。

情境變體：將三張服務卡片改成三種方案價格卡；保留 .service-list、.service-card 與盒模型 CSS，只替換標題、價格與說明文字。
獨立挑戰：不看 Solution，替另一個服務型商家完成「用 content、padding、border、margin 與 box-sizing 控制服務卡片尺寸」，並留下 3 個 .service-card、Computed 的 padding／border／box-sizing、父層 gap、390px 無水平捲軸、鍵盤 focus 的驗收證據。

CSS 基礎：盒模型與間距

先理解：這堂課解決什麼問題？

先備知識與操作環境

先做最小實驗：先看見結果

學生練習流程

最小實驗

Step 2

最小實驗 2

Starter

Checkpoint

Solution

變體驗收

檔案地圖：每個位置負責什麼？

先學會這些詞

最小例子：先看懂，再複製

Live Lab：逐段讀碼與驗證

先在 HTML 建立三張服務卡片

加入 width、padding 與 border，先看 content-box

由父層用 Grid 與 gap 管理卡片間距

用 border-box 修正窄版水平溢位

把盒模型對照搬到最小實驗

完成變體與離場回顧

互動問答

白話解析：

對照位置：

預期觀察：

常見錯誤：

立即驗證：

白話解析：

對照位置：

預期觀察：

常見錯誤：

立即驗證：

白話解析：

對照位置：

預期觀察：

常見錯誤：

立即驗證：

白話解析：

對照位置：

預期觀察：

常見錯誤：

立即驗證：

常見誤解

本堂任務與驗收

官方延伸閱讀