paddingとmarginどちらを使うべきか

cssでサイトに余白をつけるときによく迷うのが「padding」と「margin」の使い分けです。

両者をうまく使い分けるためには、まず2つの違いを十分に理解する必要があります。十分に理解していない状態で適当な使い方をしていると、後々うまくレイアウトができない可能性が出てきます。

paddingとmarginの違い

paddingとmarginとで大きく違うところが、余白のつく場所です。
paddingは要素の内側、marginは要素の外側につきます。

わかりやすく説明すると、
要素の内側の余白とは、borderをつけたときの内側の部分、またはbackgroundをつけたときの部分を指します。
要素の外側の余白とは、borderをつけたときの外側の部分を指します。

paddingとmarginの使い分け方

paddingは、要素の内側の余白となるのでborderとの間に余白を入れたい、backgroundの幅をもっと取りたいといった場合に使います。

marginは、要素の外側の余白となるのでborderまたはbackgroundの外側、かつ要素と要素の間に余白を入れたい場合に使います。

まとめ

paddingとmarginは使用頻度の高い重要なプロパティですので、2つの違いをしっかりと理解し使い分けられるようにしていきましょう！