【CSS-tips⑩】marginを一括で設定して統一したい
owl セレクタ（ふくろうセレクタ）を利用すると、
各要素の上下のマージンを一括で設定して統一することができます。
＜解説＞
owl セレクタ ⇒ * + * というセレクタは、「ユニバーサルセレクタ (*)」 と「隣接セレクタ (+)」 を組み合わせており、連続する２番目以降の要素すべてを選択します。
* + * によって選択された要素の margin-top を設定することで、要素間のマージンを一括に設定できることになります。
* {
margin: 0; /* ブラウザ依存のマージンはリセット */
}
html {
font-size: 100%; /* ユーザの指定した表示サイズを尊重する */
line-height: 1.5;
}
main > * + * {
margin-top: 0.5rem; /* サイト全体で上下マージンを統一 */
}
main > * + h2,
main > * + h3,
main > * + h4,
main > * + h5,
main > * + h6 {
margin-top: 1.5em; /* ヘッダ要素の上マージンは広めに取る */
}
