# Day 63：CSS 裝飾線實作與 Margin Collapse 父子穿透問題
**Published by:** [雞蛋糕的前端修煉屋](https://paragraph.com/@gcake/)
**Published on:** 2026-02-25
**URL:** https://paragraph.com/@gcake/day-63
## Content
📅 2026-02-25 ｜ 🏷 CSS · Pseudo-elements · Box Model · Margin Collapse一、畫水平裝飾線的兩種方式電商網站的 Products 區常見標題下方的短裝飾線，實作上有兩個選項：方式語意跨瀏覽器一致性適用場景
元素✅ 代表段落主題轉換❌ 預設樣式不一致，需 reset內容層次上有分隔意義CSS 偽元素❌ 純裝飾✅ 完全由 CSS 掌控純視覺的短裝飾線結論：如果裝飾線只是視覺點綴，不代表任何內容分隔語意，偽元素是更乾淨的選擇，符合「結構歸 HTML、裝飾歸 CSS」的分工原則。 developer.mozilla二、::before / ::after 的佔位概念::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; } 三、裝飾線用 background-color vs border兩種方式都能畫出 1px 的線，但設計意圖不同： developer.mozilla考量點background-colorborder語意描述盒子的填色描述盒子的邊線圓角支援✅ 可用 border-radius❌ 線段本身不支援box-sizing 影響❌ 不受影響✅ 影響總高度計算適用場景獨立裝飾線元素邊緣框線（card、input 等）結論：偽元素裝飾線用 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 */ } 四、偽元素 Debug 技巧開發時無法直接用 HTML 確認偽元素位置，可用以下方式：DevTools Elements 面板：展開元素節點，::before / ::after 會列在子節點裡加背景色 debug：開發中先設 background-color: red 確認位置與尺寸，完成後換回正式顏色DevTools Computed 面板：查看偽元素的 box model 計算結果五、偽元素撐高父層對 vertical-align 的影響::before 設為 display: block 後，會成為父元素內部的區塊子元素，進而撐高父元素的內容盒。 developer.mozilla父元素為 display: block：正常行為，頁面整體對齊不受影響父元素為 display: inline-block：::before 撐高元素後，vertical-align 的基線計算會偏移，造成同行兄弟元素錯位，需特別留意沒有 ::before 時： ┌──────────────────────┐ │ inline-block 元素 │ 基線在文字底部 └──────────────────────┘ 有 ::before (display: block) 後： ┌──────────────────────┐ │ ┌──────────────────┐ │ │ │ ::before（高） │ │ ← 這個高度把基線往下推 │ └──────────────────┘ │ │ 文字 │ 基線現在在這裡 └──────────────────────┘ 六、Margin Collapse：父子元素的外距穿透問題現象Footer 的兩個子容器之間出現非預期間隔，但 DevTools 確認兩個容器的 margin 都是 0。根本原因Margin Collapse（外距折疊） 不只發生在相鄰兄弟元素之間，也會發生在父子元素之間。 developer.mozilla 當父層同時滿足以下條件，子元素的 margin 會穿透父層折疊到容器外部：沒有 border沒有 padding沒有 inline 內容（如文字） ← 的 margin-top 穿透 .footer__bottom ┌──────────────────┐ 向上折疊，視覺上變成容器間的空隙 │ .footer__content │ └──────────────────┘ ↑ 非預期的間距（其實是
的 margin） ┌──────────────────┐ │ .footer__bottom │ ← 沒有 padding，無法阻擋 │ ┌────────────┐ │ │ │
│ │ ← 有預設 margin-top: 1em │ └────────────┘ │ └──────────────────┘ 驗證方式：DevTools → 點選
元素 → Computed → 確認 margin-top 有值。 developer.mozilla修正方案與語意設計padding 應設定在父層容器，而非子層
：/* ✅ 容器主動負責內部留白 */ .footer__bottom { text-align: center; padding: 60px 0; /* padding 同時阻斷了 margin collapse */ } .footer__copyright { color: rgb(200, 200, 200); margin: 0; /* 消除
預設 margin，語意更清晰 */ } 寫法語意padding 設在父層容器主動把內容往內推擠，職責清晰padding 設在子層子元素自己撐大，責任邊界模糊這個修法有「一石二鳥」的效果：父層獲得 padding 後，子層的 margin 就無法再穿透折疊出去，Margin Collapse 問題同時消失。 thecodingfox記憶口訣父層沒有 padding / border，子層的 margin 會「穿牆而出」。七、防止 Margin Collapse 的所有方式方式說明加 padding 或 border最常用，也最語意化加 overflow: hidden建立新的 BFC，阻斷折疊加 display: flow-root明確建立 BFC，無副作用父層有 inline 內容（如文字）自動阻斷折疊robcallaghan.co延伸閱讀MDN — ::before 偽元素 developer.mozillaMDN — ::after 偽元素 developer.mozillaMDN — Mastering Margin Collapsing developer.mozillaMDN — CSS Pseudo-elements developer.mozillaTODO[ ] Add implementation examples[ ] Add resource links[ ] Proofread and format
## Publication Information
- [雞蛋糕的前端修煉屋](https://paragraph.com/@gcake/): Publication homepage
- [All Posts](https://paragraph.com/@gcake/): More posts from this publication
- [RSS Feed](https://api.paragraph.com/blogs/rss/@gcake): Subscribe to updates