商用網站架設實務

LESSON-05 · solution

CSS 基礎：盒模型與間距

這一頁不是直接複製答案；先逐檔看差異、修改原因與驗收證據，再把需要的改動帶回自己的資料夾。 這頁用 可觀察證據 和 anchor 指出下一個動作。

Starter3 個小成果
Checkpoint一個核心缺口
Solution4 個差異

開始前確認

這一頁的結果：所有相關檔案可開啟或閱讀；沒有 TODO、CHECKPOINT 或 placeholder；能說明每個檔案為何改動

工作方式：先把這一階段複製到自己的工作資料夾，開啟 files/index.html，記下修改前的畫面、DOM、Console 或 Network狀態。

會用到的檔案：index.html、style.css

本堂焦點：用 content、padding、border、margin 與 box-sizing 控制服務卡片尺寸

照這個順序做

一次只做一張卡。完成後先重新整理入口，再留下證據，才進入下一張。

差異 1

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

目的

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

修改檔案

index.html

程式碼位置

.service-list

現在要做：先對照差異，再檢查 在 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>

貼上位置：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；畫面出現三張服務卡片。

驗收證據：Elements 展開 .service-list，確認有 3 個 article；畫面看到 3 個 h3。

卡住時先看這裡

常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。

第一個檢查：只對照目前差異指定的檔案與 anchor。

差異 2

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

目的

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

修改檔案

style.css

程式碼位置

.service-card

現在要做：先對照差異，再檢查 在 style.css 的「.service-card」對照這項變更：.service-card { width: 100%; padding: 1.25rem; border: 1px solid #b9cddd; background: #f7fbfc; }

貼上位置：style.css 的 .service-card 區塊

.service-card {
  width: 100%;
  padding: 1.25rem;
  border: 1px solid #b9cddd;
  background: #f7fbfc;
}

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

驗收證據：Computed／Box Model 看到 width、padding、border；scrollWidth 大於 clientWidth。

卡住時先看這裡

常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。

第一個檢查：只對照目前差異指定的檔案與 anchor。

差異 3

分辨父層 gap 與子元素 margin 的責任。

目的

分辨父層 gap 與子元素 margin 的責任。

修改檔案

style.css

程式碼位置

.service-list

現在要做：先對照差異，再檢查 在 style.css 的「.service-list」對照這項變更：.service-list { display: grid; gap: 1rem; }

貼上位置：style.css 的 .service-list 區塊

.service-list {
  display: grid;
  gap: 1rem;
}

預期結果：三張卡片間距一致，Computed 看到父層 display:grid 與 gap。

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

卡住時先看這裡

常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。

第一個檢查：只對照目前差異指定的檔案與 anchor。

差異 4

讓宣告的 width 包含 padding 與 border，修正 390px 水平溢位的根因。

目的

讓宣告的 width 包含 padding 與 border，修正 390px 水平溢位的根因。

修改檔案

style.css

程式碼位置

.service-card box-sizing

現在要做：先對照差異，再檢查 在 style.css 的「.service-card box-sizing」對照這項變更：.service-card { box-sizing: border-box; }

貼上位置：style.css 的 .service-card box-sizing 區塊

.service-card { box-sizing: border-box; }

預期結果：390px viewport 沒有水平捲軸；Computed 顯示 box-sizing:border-box。

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

卡住時先看這裡

常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。

第一個檢查：只對照目前差異指定的檔案與 anchor。

階段檔案

完整檔案收在可展開的卡片中；先完成上方微步驟，再用這裡查閱與複製。檔案位置要和目前的相對路徑一致。

開啟 solution 的可執行入口

index.html入口檔案：建立 .service-list 與三張 .service-card 的 HTML 結構。

這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。

​
<!doctype html>
<html lang="zh-Hant">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS 基礎：盒模型與間距</title>
  <link rel="icon" href="../../../assets/favicon.svg" type="image/svg+xml">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="site-header">
    <a class="brand" href="index.html">安心維護</a>
    <span class="single-page-label">本堂單頁練習</span>
  </header>
  <main class="page-shell">
    <p class="eyebrow">LESSON-05 · 用 content、padding、border、margin 與 box-sizing 控制服務卡片尺寸</p>
    <h1>CSS 基礎：盒模型與間距</h1>
    <p class="page-description">先建立服務卡片，再觀察 padding、border 與 box-sizing 如何影響實際寬度。</p>
    <section class="service-area" aria-labelledby="services-title">
      <h2 id="services-title">服務方案</h2>
      <p>每張卡片都要有清楚的內容、內距與邊框，窄版也要保持可讀。</p>
      <div class="service-list" aria-label="服務方案">
        <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>
      </div>
    </section>
  </main>
</body>
</html>
style.css呈現層：逐步觀察 content、padding、border、gap 與 box-sizing。

這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。

​
:root {
  font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans TC", sans-serif;
  color: #17324d;
  background: #f5f8fb;
}
body { margin: 0; min-height: 100vh; line-height: 1.7; }
.site-header {
  width: min(100% - 2rem, 920px);
  margin: 1rem auto 0;
  padding: .75rem 0;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.site-header a { color: #155e75; }
.page-shell {
  box-sizing: border-box;
  width: min(100% - 2rem, 760px);
  margin: 2rem auto;
  padding: 2rem;
  border: 1px solid #cbd8e4;
  border-radius: 20px;
  background: #fff;
}
.eyebrow { color: #176b87; font-weight: 800; }
.page-description { color: #52657d; }
.service-area { margin-top: 2rem; }
.service-list { }
.service-card {
  width: 100%;
  padding: 1.25rem;
  border: 1px solid #b9cddd;
  background: #f7fbfc;
}
.service-list {
  display: grid;
  gap: 1rem;
}
.service-card { box-sizing: border-box; }
a:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 3px; }
@media (max-width: 560px) {
  .site-header { align-items: flex-start; flex-direction: column; }
  .page-shell { margin: 1rem auto; padding: 1rem; }
}

完成驗收

下一步

Solution 對照完成後，回到 README 整理證據，並準備下一堂課的先備知識。

回到 README，整理本堂證據並銜接下一堂