CSS Reset / Normalize.css 樣式初始化 – 差異比較與新專案怎麼選

在前端網頁開發中，新手最常遇到的問題之一就是不同瀏覽器之間的預設樣式差異導致畫面跑版（例如網頁四周無故多出一圈 8px 白邊，或按鈕與標題間距不一）。這也是為什麼所有成熟的網站專案在切版前，都會先引入 CSS Reset 或 normalize.css 進行樣式初始化。

快速使用與章節跳轉（依需求點擊直達）：

• 🧭 正在開新專案猶豫選哪個？ ➔ CSS Reset 與 Normalize.css 差異比較表 ｜ 4 大開發情境選型建議
• ⚡ 想直接拿 normalize.css 的 CDN 或 NPM 指令？ ➔ 跳轉至 Normalize.css 快速引入（或參閱專文：Normalize.css 用法教學：CDN 引入、NPM 安裝與跨瀏覽器預設樣式修正）
• ⚡ 想直接複製 Eric Meyer Reset 或現代 border-box 歸零程式碼？ ➔ 跳轉至 Eric Meyer Reset 範本 ｜ 跳轉至現代盒模型初始化起手式（或參閱專文：CSS Reset 樣式初始化：Eric Meyer Reset 與 Modern CSS Reset 程式碼範本）

---

為什麼需要樣式初始化？解決跨瀏覽器預設樣式差異與跑版

每個瀏覽器（Chrome、Safari、Firefox、Edge）內部都有一份名為「User Agent Stylesheet」的預設 CSS 樣式表，用來決定 HTML 標籤在未套用任何外部樣式時的外觀：

• body 標籤預設帶有 margin: 8px 的外距，導致背景色無法貼齊視窗邊緣。
• h1 ～ h6 標題與 p 段落的字級大小、上下 margin 在不同瀏覽器計算略有落差。
• ul、ol 清單預設帶有縮排內距與項目圓點（list-style）。
• 特定互動標籤在各瀏覽器外觀不一（例如 a 標籤預設底線與點擊外框，可參考 CSS 移除超連結顏色與藍色外框 (a 標籤 text-decoration / outline)；或是 Safari 專屬的折疊箭頭，可參考 CSS 去除 details tag 在 Safari 前面預設箭頭樣式 (summary / ::marker)）。

如果開發初期沒有先統一這些基礎標籤的預設值，往往會造成在 Chrome 開發完看似正常，換到 Safari 或手機瀏覽器預覽時卻出現間距走位與表單跑版。

---

CSS Reset 與 Normalize.css 差異比較表

為了解決跨瀏覽器預設樣式不一致的問題，前端社群發展出「傳統 CSS Reset（以 Eric Meyer Reset 為代表）」與「Normalize.css」兩大主流派別。許多開發者常把兩者混為一談，但它們的設計哲學截然不同：

比較項目	傳統 CSS Reset（如 Eric Meyer Reset）	Normalize.css（溫和標準化）
核心理念	全部歸零：將所有標籤的 margin、padding、border、字級強制清空	保留與統一：保留有用的瀏覽器預設值，僅修正各家不一致處與渲染 Bug
視覺呈現	網頁完全白紙化（h1 變一般文字大小、無粗體、ul 無圓點），一切從零定義	保留原本合理的層級結構（標題維持粗體與大小、段落保有基礎間距）
主要優點	開發者擁有 100% 像素級控制權，不會被任何瀏覽器原生外距干擾	不必重新設定每個文章標籤的基本排版，同時修復跨瀏覽器表單與字體問題
主要缺點	若內容區忘記為 strong、em、ul 補寫樣式，文章將失去粗斜體與清單結構	因為保留了預設 margin，切版客製元件時仍需手動覆寫部分標籤外距

---

新專案與既有專案怎麼選擇？（4 大開發情境選型建議）

在啟動新專案或維護舊系統時，可以根據專案性質與技術棧直接對應選擇：

1. 新專案：高度客製化視覺設計稿 ／ 從零打造 UI 元件

• 建議選擇：傳統 CSS Reset（Eric Meyer Reset）或現代輕量 Reset
• 原因：當設計師提供的 Figma 設計稿對每個區塊的間距、字級都有嚴格規範時，瀏覽器預設的標題外距與清單縮排反而會成為阻礙。直接將所有邊距歸零，切版最乾淨直覺。

2. 新專案：內容導向網站 ／ 部落格 ／ 技術文件系統

• 建議選擇：normalize.css
• 原因：這類網站有大量由編輯器產出的長篇文章（包含 h1～h6、blockquote、ul、ol、table、sup）。使用 normalize.css 可以直接保留良好的預設閱讀排版，同時確保在各家瀏覽器顯示一致。

3. 新專案：已使用 Tailwind CSS 或 Bootstrap 等框架

• 建議選擇：不需額外引入
• 原因：主流 CSS 框架底層早已內建樣式初始化機制——例如 Bootstrap 5 內建了基於 Normalize.css 擴充的 Reboot；Tailwind CSS 則內建了結合現代 Reset 概念的 Preflight。若專案已載入這些框架，直接開發即可，無須重複安裝。

4. 已上線的既有大型專案：切勿突然全域重置

• 建議選擇：針對跑版元件局部修正
• 原因：若舊網站頁面數量龐大且原本沒有 Reset，此時若突然在全域引入 CSS Reset 或 normalize.css，會瞬間改變全站既有標籤的預設邊距，引發大面積排版走位。最安全的做法是僅針對出現跨瀏覽器差異的容器或新獨立頁面局部調整。

---

三大主流方案快速引入與程式碼範本

載入順序重要提醒：無論選擇哪一種初始化方案，都必須放在所有自訂 CSS 檔案的最前面載入。若順序放反，初始化規則會把你辛苦寫好的自訂樣式覆蓋掉（關於瀏覽器載入與覆寫規則，可參考 CSS 權重與優先順序：!important、ID 與 Class 選擇器比較）。

方案一：normalize.css 安裝與 CDN 引入方式

若想了解 normalize.css 底層修復了哪些 Safari / Firefox 表單與字體差異，可參閱專文 Normalize.css 用法教學：CDN 引入、NPM 安裝與跨瀏覽器預設樣式修正。以下為快速引入語法：

1. 透過 CDN 直接在 HTML 引入（適合靜態網頁）

在 HTML 的 head 區塊中，將 CDN 連結放在自訂 style.css 之前：

<!-- 1. 先載入 normalize.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">

<!-- 2. 再載入專案自訂樣式 -->
<link rel="stylesheet" href="./style.css">

2. 透過 NPM 安裝（適合 Vite / Webpack 模組化專案）

在終端機執行安裝指令後，於專案入口檔最頂端引入：

npm install normalize.css

import 'normalize.css';
import './style.css'; // 自訂樣式務必放在後面

---

方案二：經典 Eric Meyer's Reset CSS 程式碼範本

若需要完整的 @layer reset 現代版範本與逐行解析，可參閱專文 CSS Reset 樣式初始化：Eric Meyer Reset 與 Modern CSS Reset 程式碼範本。以下為經典的 Eric Meyer's Reset CSS (v2.0) 歸零語法：

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126 | License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

---

方案三：現代專案必備的盒模型與媒體初始化起手式

單純載入 normalize.css 或傳統 Eric Meyer Reset 後，元素的寬高預設仍採用 content-box（加上 padding 或 border 後會往外撐大總寬度造成破版，詳見 CSS box-sizing 用法：border-box 與 content-box 寬高計算差別）。因此現代前端團隊幾乎都會在初始化檔案下方一併補上這段設定：

/* 1. 全站統一改用 border-box，讓 padding 與 border 包含在 width 內不撐破版面 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. 防止圖片與影片超出容器寬度造成手機版橫向破版 */
img,
picture,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 3. 讓表單元件自動繼承全站字體設定 */
input,
button,
textarea,
select {
  font: inherit;
}

---

參考資料

• Normalize.css Official Documentation
• Eric Meyer's CSS Tools: Reset CSS
• Bootstrap Docs: Reboot
• Tailwind CSS Docs: Preflight