余白を追加したい場合にmarginかpaddingどちらを使うかがわからなかったので調べてみた。

説明できますか？

ある要素（モジュール）の上に24pxの余白を追加する場合、margin-topで24px指定するのと、padding-topで24px指定するのは何が違うか？

そして、どちらを使うべきか？

## 回答推奨は**`margin`**。

理由はmarginの持つ相殺機能のため。marginを使えば意図した間隔を保つことができる。

一方paddingは上の要素の状況によって隙間が変動してしまうため。

上の要素（モジュール）にmargin-bottomのようなプロパティが適用されていない場合はどちらを使っても見た目は同じ。
ただし、上の要素にmargin-bottomが適用されていると挙動が変わってくるという話。

padding-topで隙間を作った場合、上の要素にmargin-bottomが適用されていると、２つの要素の間隔は合計値になる。

例えば、上の要素がmargin-bottom: 24px、下の要素がpadding-bottom: 24pxの場合、間隔は48pxとなる。

意図した24pxよりかなり大きくなってしまう、、

### marginの場合 marginの場合は大きい方の間隔が適用される。

例えば、上の要素がmargin-bottom: 24px、下の要素がmargin-bottom: 24pxの場合、間隔は24pxとなる。

なので、意図した感覚を保つことができる。

ちなみに上の要素のmargin-bottomの値が下の要素のmargin-topよりも大きければ、大きい方の値が優先される。