owl セレクタ(ふくろうセレクタ)を利用すると、
各要素の上下のマージンを一括で設定して統一することができます。
<解説>
owl セレクタ ⇒ * + * というセレクタは、「ユニバーサルセレクタ (*)」 と「隣接セレクタ (+)」 を組み合わせており、連続する2番目以降の要素すべてを選択します。
* + * によって選択された要素の 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; /* ヘッダ要素の上マージンは広めに取る */ }