📅 2026-02-25　｜　🏷 CSS · Pseudo-elements · Box Model · Margin Collapse

電商網站的 Products 區常見標題下方的短裝飾線，實作上有兩個選項：

結論：如果裝飾線只是視覺點綴，不代表任何內容分隔語意，偽元素是更乾淨的選擇，符合「結構歸 HTML、裝飾歸 CSS」的分工原則。 developer.mozilla

::before 與 ::after 插入的位置，是在目標元素的內容裡面的前後，不是 HTML 結構中兄弟元素的順序。 developer.mozilla

┌─────────────────────────────┐
│  .element                   │
│  ┌──────┐ ┌───────┐ ┌─────┐│
│  │before│ │ 內容  │ │after││
│  └──────┘ └───────┘ └─────┘│
└─────────────────────────────┘

MDN 的定義：::before 是目標元素的「第一個子節點」，::after 是「最後一個子節點」，預設都是 display: inline。 developer.mozilla

偽元素預設 display: inline，此時 width 與 height 設定不生效。必須加上 display: block 或 display: inline-block 才能控制尺寸。 bennadel

看不見，因為 inline 元素忽略 width/height */ .element::before { content: ''; width: 40px; height: 1px; background-color: #999; } /* ✅ 加上 display: block 才能設定尺寸 */ .element::before { content: ''; display: block; /* 關鍵 */ width: 40px; height: 1px; background-color: #999; }

兩種方式都能畫出 1px 的線，但設計意圖不同： developer.mozilla

結論：偽元素裝飾線用 background-color 更直觀。 以 width + height + background-color 直接描述形狀與顏色，語意清楚，也不受 box-sizing 影響。

/* Products 標題上方的短裝飾線 */
.products__subtitle::before {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background-color: #999;
  margin: 0 auto 16px; /* 水平置中，下方推開 16px */
}

開發時無法直接用 HTML 確認偽元素位置，可用以下方式：

1. DevTools Elements 面板：展開元素節點，::before / ::after 會列在子節點裡

2. 加背景色 debug：開發中先設 background-color: red 確認位置與尺寸，完成後換回正式顏色

3. DevTools Computed 面板：查看偽元素的 box model 計算結果

::before 設為 display: block 後，會成為父元素內部的區塊子元素，進而撐高父元素的內容盒。 developer.mozilla

• 父元素為 display: block：正常行為，頁面整體對齊不受影響

• 父元素為 display: inline-block：::before 撐高元素後，vertical-align 的基線計算會偏移，造成同行兄弟元素錯位，需特別留意

沒有 ::before 時：
┌──────────────────────┐
│  inline-block 元素   │  基線在文字底部
└──────────────────────┘

有 ::before (display: block) 後：
┌──────────────────────┐
│ ┌──────────────────┐ │
│ │  ::before（高）  │ │  ← 這個高度把基線往下推
│ └──────────────────┘ │
│  文字                │  基線現在在這裡
└──────────────────────┘

Footer 的兩個子容器之間出現非預期間隔，但 DevTools 確認兩個容器的 margin 都是 0。

Margin Collapse（外距折疊） 不只發生在相鄰兄弟元素之間，也會發生在父子元素之間。 developer.mozilla

當父層同時滿足以下條件，子元素的 margin 會穿透父層折疊到容器外部：

• 沒有 border

• 沒有 padding

• 沒有 inline 內容（如文字）

                        ← <p> 的 margin-top 穿透 .footer__bottom
┌──────────────────┐       向上折疊，視覺上變成容器間的空隙
│ .footer__content │
└──────────────────┘
  ↑ 非預期的間距（其實是 <p> 的 margin）
┌──────────────────┐
│ .footer__bottom  │  ← 沒有 padding，無法阻擋
│  ┌────────────┐  │
│  │    <p>     │  │  ← 有預設 margin-top: 1em
│  └────────────┘  │
└──────────────────┘

驗證方式：DevTools → 點選 <p> 元素 → Computed → 確認 margin-top 有值。 developer.mozilla

padding 應設定在父層容器，而非子層 <p>：

/* ✅ 容器主動負責內部留白 */
.footer__bottom {
  text-align: center;
  padding: 60px 0; /* padding 同時阻斷了 margin collapse */
}

.footer__copyright {
  color: rgb(200, 200, 200);
  margin: 0; /* 消除 <p> 預設 margin，語意更清晰 */
}

這個修法有「一石二鳥」的效果：父層獲得 padding 後，子層的 margin 就無法再穿透折疊出去，Margin Collapse 問題同時消失。 thecodingfox

父層沒有 padding / border，子層的 margin 會「穿牆而出」。

robcallaghan.co

• MDN — ::before 偽元素 developer.mozilla

• MDN — ::after 偽元素 developer.mozilla

• MDN — Mastering Margin Collapsing developer.mozilla

• MDN — CSS Pseudo-elements developer.mozilla

• [ ] Add implementation examples

• [ ] Add resource links

• [ ] Proofread and format