CSSで余白を作る時に親要素のpaddingにすべきか子要素のmarginにすべきかで迷う
前提（親子の位置関係）
- 要素の中身や指定がない場合、親要素のheightは子要素のそれと等しくなる。
- 要素の中身や指定がない場合、子ブロック要素のwidthは親要素のそれと等しくなる。幅の指定のある先祖がいない場合は window 幅になる。
- 親要素が要素の中身や border の実体を持っていなくて padding が指定されていない場合は子要素は親要素から見て
top: 0; left: 0の位置に配置される。
子要素のmarginとして余白を作る
親要素が要素の中身や border の実体を持っていない場合
- 子要素の上下に margin が指定されていたとしても
top: 0の位置は変わらない。 - 子要素の左右に margin が指定されている場合はそれが反映される。
- 親要素にoverflow: hidden;が設定された場合は子要素の margin は親要素との境界に対して適用される。ただし margin を適用させる目的でこれを行うべきではない。
親要素が要素の中身や border の実体を持っている場合
親要素が要素の中身や border の実体を持っている場合には子要素の margin はそれらに対して適用される。結果的に子要素の上下にmarginが適応される。
親要素のpaddingとして余白を作る場合
親要素に padding が指定されている場合は子要素常には padding の内側に配置される。
結論
子要素にmarginをつけて親要素との余白をとろうとすると条件によって適用のされ方に違いが出るので親要素にpaddingを設けた方が実装がシンプルになる場合が多い。
