[CSS]パラグラフやリストなどのテキストの下にできてしまう意図しない余白を解決する方法

p, ul, ol, dl などのテキストの下にできてしまう意図しない余白を解決するうまい方法をCSS-Tricksから紹介します。

下記は各ポイントを意訳したものです。

Spacing The Bottom of Modules

上記のコードはシンプルで、divをラッパーとして、見出しとパラグラフを配置しているだけです。

HTML

<div class="module">
  <h3>Module</h3>
  <p>Pellentesque habitant morbi tristique senectus...</p>
</div>

スタイルシートもシンプルです。

CSS

html {
  background: #333;
}
.module {
  width: 20rem;
  padding: 1.5rem;
  margin: 1.5rem auto;
  background: white;
}

h3 {
  margin: 0 0 0.75rem 0;
  border-bottom: 1px solid #ccc;
  padding: 0 0 0.25rem 0;
}
p {
  margin: 0 0 1rem 0;
}

で、これをブラウザで表示すると、こんな感じになります。

一見、問題ないように見えますが、意図しない余白ができてしまってます。

パラグラフの下に怪しい余白（赤い部分）が

これは、pのマージンを取り除くことで解決ができます。

CSS:試作1/5

.module p {
  margin: 0;
}

このままでは、例えばパラグラフが連続して配置されている場合に困ってしまいます。そこで最後のp要素のみ適用するようにします。

CSS:試作2/5

.module p:last-child {
  margin: 0;
}

この方法はパラグラフだけでなく、リストなど他の要素にも利用できます。

CSS:試作3/5

.module p:last-child,
.module ul:last-child,
.module ol:last-child,
.module dl:last-child {
  margin: 0;
}

すべての要素を網羅して指定するのはスマートではないので、全称セレクタを使用してもう一工夫してみます。

CSS:試作4/5

.module *:last-child {
  margin: 0;
}

この記述でもまだ問題が少しあります。
この問題を引き起こすであろうリストは常に子要素をもっているので、子セレクタを使い、直下の階層の子要素をターゲットにします。

CSS:試作5/5

.module > *:last-child {
  margin: 0;
}

子セレクタの記述をベースに、例えばリストのアイテムにパラグラフがある場合などにも備えておきます。

CSS: 完成形

.module > *:last-child,
.module > *:last-child > *:last-child,
.module > *:last-child > *:last-child > *:last-child {
  margin: 0;
}

完成形のデモは、下記ページでチェックできます。
パラグラフでもリストでも、リストの中にあるパラグラフでも、テキストの下にできてしまう意図しない余白は完全に削除できています。

デモページ

右上の「Toggle」ボタンをクリックすると、意図した余白（padding）の表示・非表示を切り替えることができます。

デモページ：Paddingの表示・非表示