user agent stylesheetのまとめ -Chrome, Safari, Firefox, Edge 各ブラウザごとのデフォルトのスタイルシート

Webページを実装する際、そのページを表示するブラウザが各HTML要素にデフォルトでどのようなスタイルが適用されているか知っておくのは大切なことです。
Chrome, Safari, Firefox, Edge 各ブラウザごとのデフォルトのスタイルシート、user agent stylesheetを紹介します。

例えば、p要素にはdisplay: block;が定義されており各ブラウザでmarginの数値が異なります。また、h1要素は単独で使用した場合とsection要素などの子要素で使用した場合ではmarginの数値が異なります。

Chromeのuser agent stylesheet

Chromeのuser agent stylesheet

Safariのuser agent stylesheet

Firefoxのuser agent stylesheet