なぜ知りたいと思ったか？

marginやpaddingを指定していないのに、要素と要素の間に余白ができているのが気になった

余白を指定していないのに、初めから余白が出来ているのはなぜか？

①ブラウザのデフォルトCSSを参照しているので、初めから余白が出来ている
下のWebページでは見出しタグしか設定していないが、margin-topとmargin-bottomが設定されている

②ブラウザによってスタイルが違う
「Google Chrome」や「Safari」等のブラウザ毎にスタイルの表示方法が異なるので、CSSを初期化して設定し直す
以下のURLを確認すると、ブラウザによってスタイルが微妙に違う
https://gray-code.com/html_css/make-the-website-vol8/

リセットCSSの機能とは？

デフォルトCSSを使ってリセットすれば、どのブラウザでも同じ表示方法で統一される

リセットCSSの種類は2つある

①ほぼ全てのスタイルをリセットするタイプデフォルトCSSを完全にリセットするので、どうレイアウトするかをコーディングしやすくなる
②極力デフォルトCSSを残すタイプスタイルの形状を残りつつリセットできるので、1からコーディングする必要が無い

2種類のリセットCSSを使ってみる

①ほぼ全てのスタイルをリセットするタイプ
[destyle.cssを利用]

destyle.css

<head>
  <meta charset="UTF-8">
  <title>CSS Cafe</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@3.0.2/destyle.css">
  <link rel="stylesheet" href="css/base.css">
</head>

見出しとなる太字までリセットしているので、CSSファイルでフォント調整する必要がある

②極力デフォルトCSSを残すタイプ
[A Modern CSS Resetを利用]

A Modern CSS Reset.css

<head>
  <meta charset="UTF-8">
  <title>CSS Cafe</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modern-css-reset/dist/reset.min.css">
  <link rel="stylesheet" href="css/base.css">
</head>

太字の機能を残しつつ、デフォルトの余白が存在しない

調べてみて分かったこと

①ブラウザ毎に「デフォルトでスタイルをどう表示するか」が違うことを理解しておく
②どのブラウザで対応するかを明確にしてから、スタイルを指定し直した方が良いと思う