なぜ知りたいと思ったか？
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>
太字の機能を残しつつ、デフォルトの余白が存在しない
調べてみて分かったこと
①ブラウザ毎に「デフォルトでスタイルをどう表示するか」が違うことを理解しておく
②どのブラウザで対応するかを明確にしてから、スタイルを指定し直した方が良いと思う