<h2 id="%E3%83%AA%E3%82%BB%E3%83%83%E3%83%88css%E3%81%A8%E3%81%AF">
<a class="header-anchor-link" href="#%E3%83%AA%E3%82%BB%E3%83%83%E3%83%88css%E3%81%A8%E3%81%AF" aria-hidden="true"></a> リセットCSSとは</h2>
デフォルトでは、特に何も設定していなくてもブラウザごとにスタイルシートが定義されてます。 
そのスタイルシートを打ち消すためのスタイルシートをリセットCSSと呼びます。 
リセットCSSを読み込むことでブラウザごとの差をなくすことができます。
<aside class="msg message">!<div class="msg-content">
cf. 似た概念としてnormalize.cssというのもあります。こちらはブラウザごとの差異をなくすということは共通していますが、異なる点はブラウザ特有のCSSをなくすということは行なっていないという点です。
</div></aside>
<h2 id="%E4%BD%BF%E3%81%84%E6%96%B9">
<a class="header-anchor-link" href="#%E4%BD%BF%E3%81%84%E6%96%B9" aria-hidden="true"></a> 使い方</h2>
リセットCSSを定義してから通常のCSSを定義します。古いものもあるため注意が必要です。 
(リセットCSSを後で定義してしまうとリセットCSSで上書きされてしまうため。)
<aside class="msg alert">!<div class="msg-content">
コピペするときはライセンスに気をつけましょう。
</div></aside>
<div class="code-block-container"><pre class="language-html"><code class="language-html">&lt;head&gt;
 &lt;link rel="stylesheet" href="reset.css"&gt;
 &lt;link rel="stylesheet" href="style.css"&gt;
&lt;/head&gt;
</code></pre></div><h2 id="%E4%BE%8B">
<a class="header-anchor-link" href="#%E4%BE%8B" aria-hidden="true"></a> 例</h2>
自分でリセットCSSを定義してもいいのですが、すでに定義されたCSSがあるのでそれを読み込むのが簡単です。<a href="https://coliss.com/articles/build-websites/operation/css/css-reset-for-modern-browser.html" target="_blank" rel="nofollow noopener noreferrer">coliss</a>のところに定義されてある<a href="https://github.com/andy-piccalilli/modern-css-reset/blob/master/dist/reset.min.css" target="_blank" rel="nofollow noopener noreferrer">ソースコード</a>をコピペしてくるのが一番楽かなと思います。
<h2 id="%E3%83%AA%E3%82%BB%E3%83%83%E3%83%88css%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F">
<a class="header-anchor-link" href="#%E3%83%AA%E3%82%BB%E3%83%83%E3%83%88css%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F" aria-hidden="true"></a> リセットCSSを使ってみた</h2>
GoogleChromeとfirefoxをそれぞれ使ってリセットCSS適用前後の比較をしてみました。 
スペースの間隔がみやすいように背景だけ変更しています。
<h3 id="%E9%81%A9%E7%94%A8%E5%89%8D">
<a class="header-anchor-link" href="#%E9%81%A9%E7%94%A8%E5%89%8D" aria-hidden="true"></a> 適用前</h3>
<ul>
<li>
chrome 
<img src="https://res.cloudinary.com/zenn/image/fetch/s--_ndUuaap--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://gyazo.com/0c74dc6cd90d1b33586f946322cd5665.png" alt="リセットCSS適用前(chrome)" loading="lazy" class="md-img">
</li>
<li>
firefox 
<img src="https://res.cloudinary.com/zenn/image/fetch/s--bwRw4IZy--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://gyazo.com/3f67fce7949ba071a0146039a7db5cda.png" alt="リセットCSS適用前(firefox)" loading="lazy" class="md-img">
</li>
</ul>
例が悪いのかchromeとfirefoxの違い自体はよくわからなかったですが、それぞれh1とh2の間にスペースがあるなどのブラウザ特有のCSSが適用されています。
<h3 id="%E9%81%A9%E7%94%A8%E5%BE%8C">
<a class="header-anchor-link" href="#%E9%81%A9%E7%94%A8%E5%BE%8C" aria-hidden="true"></a> 適用後</h3>
<ul>
<li>
chrome 
<img src="https://res.cloudinary.com/zenn/image/fetch/s--L3b_91em--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://gyazo.com/a43b9d765dbd24086ce660654e29e5c8.png" alt="リセットCSS適用後(chrome)" loading="lazy" class="md-img">
</li>
<li>
firefox 
<img src="https://res.cloudinary.com/zenn/image/fetch/s--32-q9Tsz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://gyazo.com/71ebb7262b663963c8cdedee2d9a4f51.png" alt="リセットCSS適用後(firefox)" loading="lazy" class="md-img">
</li>
</ul>
リセットすることで、間隔が詰まって表示することができるようになりました。
cf. ソースコード
<div class="code-block-container"><pre class="language-html"><code class="language-html">
&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
 &lt;head&gt;
 &lt;meta charset="UTF-8" /&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
 &lt;title&gt;Document&lt;/title&gt;
 &lt;link rel="stylesheet" href="reset.css" /&gt;
 &lt;link rel="stylesheet" href="style.css" /&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;h1&gt;h1&lt;/h1&gt;
 &lt;h2&gt;h2&lt;/h2&gt;
 &lt;input type="text" /&gt;
 &lt;div&gt;div&lt;/div&gt;
 &lt;/body&gt;
&lt;/html&gt;

</code></pre></div><h2 id="%E5%8F%82%E8%80%83">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83" aria-hidden="true"></a> 参考</h2>
<a href="https://coliss.com/articles/build-websites/operation/css/css-reset-for-modern-browser.html" target="_blank" rel="nofollow noopener noreferrer">リセットCSS</a>
<a href="https://github.com/andy-piccalilli/modern-css-reset/blob/master/dist/reset.min.css" target="_blank" rel="nofollow noopener noreferrer">リセットCSS(ソース)</a>

リセットcssによるブラウザ特有のCSSの打ち消し

Discussion