[CSS]マージンとパディングの使い分け方 -コンテナとコンテンツ間、コンテンツ内の要素間

CSSでスペースを与える時、マージン(margin)とパディング(padding)はどのように使い分けをしていますか？
Webサイトやスマホアプリで実際に使用されるUIコンポーネントを例に、マージンとパディングの使い分け方を紹介します。

下記のように3つの要素間にある2つのマージン指定も、first-childやlast-childでネガティブマージンを使わずに指定する巧い方法に、目からウロコです。

Margin or padding?

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• スペースの使い分け
• CSSを使用して例を実装
• セレクタの解説
• 全称セレクタの活用
• マージンとパディングの使い分け

スペースの使い分け

カード型のUIコンポーネントを用意しました。

カード型のUIコンポーネント

この例では、2種類の異なるスペースが存在します。

• ブルー: カード間のスペース
• グリーン: カードとコンテナの間のスペース

これら2つのスペースは、異なる利害関係をもっていることを理解することが重要です。
例えば、これらのスタイルを定義する時には、カード間のスペースに影響を与えずに、カードとコンテナの間のスペースを16pxから24pxに変更できるように、これらのスタイルの定義は切り離しておくべきです。

CSSを使用して例を実装

マージンとパディングを使用してこのデザインを実装する方法はいくつかありますが、マージンとパディングを適切に使用して、後でカードを追加できるように実装してみます。

2つのセレクタ、2つのスタイル、これで完了です。

セレクタの解説

「.card + .card」で使用している「+」は、隣接セレクタと呼ばれるCSSのセレクタです。直後に隣接している要素にスタイルを適用します。

グリーンの要素は、隣接セレクタでスタイルが適用される要素

上の図のように、それぞれのカードの直後に隣接している要素にマージンが適用されます。したがって、隣接セレクタを使用すると、最初のカードを除くすべてのカードにマージンを与えることができます。

これは必要な数だけカードを追加できることを意味しており、カード間には常に8pxのスペースがあります。

次に、「カードを追加(Add card)」ボタンのように、カードではない要素をカードの隣に追加するとします。

カードではない要素を追加するとどうなるか

CSS上では、追加した要素はカードではないので、「.card」を与えないでしょう。では、どんなclassを与えますか？

「.card」と同じmarginプロパティを持つ「.add-card」を作成すればよいでしょうか？

いいえ、もっと良い方法があります。

全称セレクタの活用

このセレクタは便利で、実際のところ非常に有用です。私はよく使用します。まずは、CSSを見てみてください。

「+」は上で説明したように直後に隣接している要素にスタイルを適用するので、「.container」内のあらゆる要素（全称セレクタ）の直後に隣接しているあらゆる要素（全称セレクタ）にスタイルを適用します。カードはもちろん、それ以外の要素にもです。

グリーンの要素は、隣接セレクタでスタイルが適用される要素

マージンとパディングの使い分け

コンテナ内のコンテンツで、どのスペースにマージンを使うのか、パディングを使うのか、私はより良いアイデアを与えることを希望します。

上記の例と経験則から、マージンとパディングは下記のように使い分けをしています。

マージン(margin)

コンテナ内の要素間のスペース。

パディング(padding)

コンテナとそのコンテンツの間のスペース。