レイアウトの余白をpaddingにするかmarginにするか決める際の考え方

HTML/CSS

結論: レイアウトの余白をpaddingで作成するかmarginで作成するかの決め方

レイアウトから『大きい四角の中に小さい四角』という部分を探す。
大きい四角と小さい四角のクラス名が同じでも違和感がなければpaddingを適用する。それ以外の余白はmarginで作成。

padding・marginの決定方法の具体的な手順

レイアウトから『大きい四角、その中に小さい四角』という部分を探す

paddingはボックスの内側に関する余白ですので、『大きい四角、その中に小さい四角』という箇所がpaddingの候補になります。イメージでいうと『回』というボックスを探すイメージです。

大きい四角と小さい四角を同じクラス名にしても違和感がないか確認する

たとえば、大きい四角の部分をtitleというクラス名にした場合、小さい四角のクラス名もtitleで違和感がないかということを確認します。

クラス名以外にも以下のような方法で確認ができます。

  • 大きな四角と小さな四角の背景色が一緒でも違和感がないか
  • 小さな四角(コンテンツ)をリンクにした場合、大きな四角の部分もクリック領域にして違和感がないか
  • 小さな四角(コンテンツ)を大きな四角のボーダーで囲っても違和感がないか

padding以外の余白はmarginにする

ここまでの過程でpaddingで余白を作成する箇所が決定できているので、それ以外の余白をmarginで作成します。

具体例

テキスト付きカードアイテム

以下のレイアウトの余白について考えてみます。

See the Pen
layout-space-sentence
by Toshiharu Nishina (@nishina555)
on CodePen.

上記のレイアウトには以下のような『大きい四角、その中に小さい四角』という箇所が存在します。

See the Pen
layout-space-button-with-border
by Toshiharu Nishina (@nishina555)
on CodePen.

上記の箇所は、たとえばsentence__bodyというクラス名に統一しても違和感がありません。ですので、paddingで余白を作成します。コードは以下の通りです。

<div class="sentence">
  <div class="sentence__body">
    <div class="sentence__title">タイトル</div>
    <div class="sentence__description">テストテストテストテストテストテストテストテストテスト</div>
  </div>
</div>

.sentence {
  padding: 30px 30px;
  border: solid;
  width: 200px;
}

.sentence__title {
  font-weight: bold;
  margin-bottom: 20px;
}

See the Pen
layout-space-sentence
by Toshiharu Nishina (@nishina555)
on CodePen.

ボタンの配置

以下のレイアウトの余白について考えてみます。

See the Pen
layout-space-button
by Toshiharu Nishina (@nishina555)
on CodePen.

上記のレイアウトには以下のような『大きい四角、その中に小さい四角』という箇所が存在します。

See the Pen
layout-space-button-with-border
by Toshiharu Nishina (@nishina555)
on CodePen.

小さい四角にbuttonというクラス名をつけた場合、大きい四角もbuttonにすると違和感があります。ですので、この場合はpaddingではなくmarginで余白を作成します。コードは以下の通りです。

<div class="content">
  <div class="content__button">ボタン</div>
</div>

.content {
  width: 200px;
  height: 200px;
  border: solid;
}

.content__button {
  width: 100px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 50px auto 0;
  background: lightblue;
}

See the Pen
layout-space-button
by Toshiharu Nishina (@nishina555)
on CodePen.

パンくずリスト

『大きい四角、その中に小さい四角』という箇所が隠れている場合もあります。たとえば以下のレイアウトの余白について考えてみます。

See the Pen
layout-space-breadcrumb
by Toshiharu Nishina (@nishina555)
on CodePen.

上記のレイアウトには『大きい四角、その中に小さい四角』が存在しないので、ルールに従うとmarginで余白を作成することになります。
実際marginを利用して上記のレイアウトは作成できますが、以下のようにも考えられます。

See the Pen
layout-space-breadcrumb-with-border
by Toshiharu Nishina (@nishina555)
on CodePen.

上記の箇所の小さな四角(テキスト部分)をリンクにした場合、大きな四角もクリック領域にしても違和感はありません。ですのでpaddingで余白を作成します。
paddingで実装したコードは以下の通りです。

<nav aria-label="Breadcrumb" class="breadcrumb">
  <ul>
    <li><a href="#" class="item">Home</a></li>
    <li><a href="#" class="item">Category</a></li>
    <li><a href="#" class="item">Sub-Category</a></li>
    <li><span class="item">Product</span></li>
  </ul>
</nav>

/*----------------------
リスト
---------------------- */
.breadcrumb ul {
  list-style: none;
  padding-left: 0; /* ulタグの左余白を削除 */
}

.breadcrumb li {
  display: inline; /* 横に並べる */
}

/*----------------------
区切り文字
---------------------- */
.breadcrumb li:not(:last-child):after {
  content: '>';
}

/*----------------------
パンくずリスト内の要素
---------------------- */
.item {
  padding: 1em 1.5em; /* 余白作成 */
}

/*----------------------
パンくずリスト内のaタグ
---------------------- */
.breadcrumb li a {
  text-decoration: none;
}

.breadcrumb li a:hover {
  text-decoration: underline;
}

See the Pen
layout-space-breadcrumb
by Toshiharu Nishina (@nishina555)
on CodePen.

さいごに

今回はレイアウトにおけるpaddingとmarginに焦点をあてましたが、横並びカードのCSSはどう設計する?具体例で理解するCSS設計の手順ではCSS設計をする上で大事な『レイアウト』と『UIパーツ』の概念についても紹介しています。

Twitter(@nishina555)やってます。フォローしてもらえるとうれしいです!

参考記事