CSSでのpaddingを親要素に付けるか、子要素に付けるか。

Question

初心者です。

headerの中にcontainerというdivision classがあるのですが、
そのcontainerの上下にpaddingをつけたいです。

参考にしている教材では、

header{
padding-top: 20px;
padding-bottom: 20px;
}

となっているのですが、

.container{
padding-top: 20px;
padding-bottom: 20px;
}
としても見た目的には同じだと思うのです。

これはどちらの方法をとっても構わないのでしょうか？
親要素にpaddingを付ける決まりや意義が何かあるのでしょうか？

Answer 1

見た目として変化がなく、それで問題も生じないと考えるのであれば、どちらでも良いと思います。

ただし、ボックス上の背景は通常 (background-clip, background-origin プロパティなどで挙動を変更しない限り) 、 padding 領域上にも描画されます。そのため、親子どちらに padding プロパティを指定しておくかによって、背景を設定したときに意図していない見た目になる場合があります。また、 border 領域、 margin 領域は padding 領域の外にあるため、これらに値を設定したとき、想定とは異なる見た目になる可能性があります。

以下のような HTML, CSS で、 .container に padding プロパティを設定したとき (動作確認用リンク) と、 .box に padding プロパティを設定したとき (動作確認用リンク) を見比べると、それぞれの使い分け方が分かると思います。

<div class="container">
  <div class="box">テキスト</div>
</div>

.container {
  width: 300px;
  height: 300px;
  background: #ffa;
  border: 5px solid #faa;
}

.box {
  width: 150px;
  height: 150px;
  background: #faf;
  border: 5px solid #aff;
}

Comments

[port]

納得できました。ありがとうございました。

Answer 2

個人的には背景色の兼ね合いから小要素にpaddingをつけることが多いです。
しかし、親要素にも指定することがあります。
そこは、ケースバイケースです。