ブラウザ（Chrome, Safari, Edgeなど）には、最初から「見出しは大きく」「段落には上下の余白を」といったデフォルトスタイル（ユーザーエージェント・スタイルシート）が設定されています。
しかし、この設定はブラウザごとに微妙に異なるため、同じコードを書いても「ブラウザによって見た目がズレる」という現象が起きます。
段落の上の余白が広い
段落の上の余白が狭い
主に以下のような設定を真っ先に読み込ませ、全てのブラウザで同じ「スタートライン」に立たせます。
margin や padding をすべて 0 にする用途に合わせて、世界中の開発者が公開しているリセットCSSを利用するのが一般的です。
| 名称 | 特徴 |
|---|---|
| Eric Meyer's Reset | ほぼ全ての装飾をゼロにする強力なリセット。 |
| Normalize.css | ゼロにするのではなく、ブラウザ間の差異だけを修正する。 |
| Destyle.css | 現代のWeb制作に合わせ、使いやすさを重視してゼロ化する。 |
リセットCSSは必ず、自分が書くメインのCSSよりも先に読み込ませます。後から読み込むと、自分が設定したデザインまでリセットされてしまうからです。