在前端切版開工時，為了消除 Chrome、Safari 與 Firefox 各自的瀏覽器預設樣式（例如 body 預設的 8px 外距或 ul 清單圓點），最直接的做法就是引入一份 CSS Reset 樣式表，將所有 HTML 標籤的預設邊距與字級強制歸零。
快速複製與章節跳轉：
- ⚡ 直接複製經典版（
meyerweb） ➔ 範本一：Eric Meyer's Reset CSS (v2.0) 完整程式碼- ⚡ 直接複製現代版（含
@layer與border-box） ➔ 範本二：Modern CSS Reset 完整程式碼- 🧭 猶豫該用 CSS Reset 還是 Normalize.css？ ➔ 參閱 CSS Reset / Normalize.css 樣式初始化 – 差異比較與新專案怎麼選
範本一：經典 Eric Meyer's Reset CSS（v2.0 完整程式碼）
一般說的 css reset meyerweb，指的就是 Eric A. Meyer 放在 meyerweb.com 的 Reset CSS，目前版本為 v2.0（2011-01-26），作者明確聲明為公開領域（Public Domain），可自由使用與修改。
下方程式碼與 meyerweb.com 官方 reset.css 原文一致（含原始註解）。你可以直接複製，儲存為專案中的 reset.css，並在 HTML 的 head 中放在所有自訂樣式表（如 style.css）的最前面載入：
/* 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;
}
/* HTML5 display-role reset for older browsers */
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;
}為什麼不直接寫 * { margin: 0; padding: 0; } 就好？
初學者常問：「為什麼 Eric Meyer 要把幾十個 HTML 標籤一個一個列出來，而不直接用萬用選擇器 * { margin: 0; padding: 0; }？」主要原因有三點：
- 避免破壞表單元件預設內距：Eric Meyer 的清單沒有列入
input、button、select、textarea等表單控制項。如果直接對*強制歸零padding與border，會導致原生輸入框與按鈕變得扁平難看且難以點擊。 - 單靠
margin: 0無法清除清單黑點與表格間距：清單的圓點需要list-style: none，表格雙線邊框需要border-collapse: collapse，這些都必須針對特定標籤設定。 - 統一標題字級與基線對齊：透過
font-size: 100%; font: inherit;，能讓h1～h6全部退回基礎文字大小，完全交由開發者依照設計稿重新定義。
使用 Eric Meyer Reset 的 3 個注意事項
| 注意項目 | 發生原因 | 實務處理建議 |
|---|---|---|
strong 與 em 失去粗體與斜體 | font: inherit 重置了 font-weight 與 font-style | 在自訂 CSS 補回 strong, b { font-weight: 700; } 與 em, i { font-style: italic; } |
| 文字行高變得過於緊密 | body { line-height: 1; } 將行高壓縮至 1 倍字高 | 在自訂 body 樣式中重新設定舒適的閱讀行高（例如 line-height: 1.5; 或 1.6） |
未包含 box-sizing: border-box | v2.0 發布於 2011 年 1 月，內容沒有任何 box-sizing 設定 | 務必在 reset.css 最下方自行補上全域 box-sizing: border-box（見下方範本二） |
範本二：現代專案推薦的 Modern CSS Reset 完整範本
隨著舊版 IE 瀏覽器退場，以及 CSS 新增了 @layer（層疊層）與 text-wrap: balance 等現代特性，「Modern CSS Reset」通常指 Josh W. Comeau 的〈A Modern CSS Reset〉與 Andy Bell 的〈A (more) Modern CSS Reset〉這兩份公開範本。
下方是本文綜合兩者整理的版本，不是任何一位作者的原版，主要差異如下，想用原版請直接到文末參考資料複製作者最新內容：
- 取自 Josh W. Comeau 版：
box-sizing、-webkit-font-smoothing、媒體元素display: block、表單font: inherit、overflow-wrap、標題text-wrap: balance。 - 取自 Andy Bell 版：
text-size-adjust: none、body的min-height與line-height: 1.5。 - 本文自行加入：外層
@layer reset、*一併歸零padding、min-height改用100dvh、媒體元素加上height: auto、ul, ol無條件移除圓點（Andy Bell 原版只針對帶有role="list"的清單）。 - Josh W. Comeau 原版另有
*:not(dialog)排除dialog、interpolate-size、p { text-wrap: pretty; }與#root, #__next { isolation: isolate; }，本範本未收錄。
/* 使用 @layer reset 將重置規則放在最低優先級，確保自訂樣式永遠能輕鬆覆寫 */
@layer reset {
/* 1. 全站統一採用直覺的 border-box 盒模型，防止 padding 與 border 撐破寬度 */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* 2. 移除所有預設外距與內距 */
* {
margin: 0;
padding: 0;
}
/* 3. 防止行動瀏覽器自動放大字級（font size inflation） */
html {
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
/* 4. 設定基礎行高；-webkit-font-smoothing 只在 macOS 生效 */
body {
min-height: 100dvh;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/* 5. 媒體元素預設改為區塊顯示並限制最大寬度，防止手機版圖片撐破畫面 */
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
height: auto;
}
/* 6. 讓表單元件自動繼承父層的 font-family 與 font-size */
input,
button,
textarea,
select {
font: inherit;
}
/* 7. 防止長單字或長網址刺穿容器邊界（搭配標題折行平衡） */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-wrap: balance;
}
/* 8. 移除清單預設圓點 */
ul,
ol {
list-style: none;
}
}Modern CSS Reset 解決了哪些現代切版痛點？
- 利用
@layer reset解決權重衝突：將 Reset 包在@layer reset內，代表它的優先權低於任何未分層的自訂 CSS（關於選擇器優先權計算，可參考 CSS 權重與優先順序：!important、ID 與 Class 選擇器比較）。 - 內建
box-sizing: border-box：徹底解決寫了width: 100%再加padding就出現橫向捲軸破版的問題（詳細計算公式可參考 CSS box-sizing 用法：border-box 與 content-box 寬高計算差別）。 - 解決
img底部莫名的幾 px 縫隙：圖片預設為inline行內元素，會對齊文字基線（Baseline）而在下方留白；設為display: block; max-width: 100%;可同時消除底部縫隙並完成 RWD 圖片自適應。 - 修復
button與input字體不一致：瀏覽器預設不會讓表單元件繼承body的字體，加上font: inherit後即可全站統一字型。
發佈留言