css - CSSスタイリングヘッダーとそれに続くコンテンツ

Question

次の非常に基本的な問題は、ヘッダーを使用してコンテンツをスタイリングします。私には次のような状況があります。通常、コンテンツは次のように構成されています。

<h1>Main Header</h1>
<h2>Sub Header</h2>
<p>Content</p>

ただし、サブヘッダーが存在しない場合もあります。コンテンツがサブヘッダーなしで直接続く場合、メインヘッダーとコンテンツの間に異なるパディング/マージンを追加したいと思います。

私が監督しているのは、これに対する簡単な解決策があるに違いないと思います。

Answer 1

隣接する兄弟セレクターを使用します。

h1 + p {
    /* ... */
}

<p/>これは、の直後にある場合にのみ選択し<h1/>ます。

Answer 2

h1 + p {
  margin-top: ...;
}

これは、h1が前に付いたpのみを選択します

Answer 3

マージンボトムを失い、代わりにマージントップを使用します。

このようmargin-top: 15pxに<p>すると、その上に何があっても15pxのスペースが得られます。

Answer 4

overflow:hiddenこのためのプロパティを試すことができます。