padding border margin の役割

margin

  • marginを設定することにより、borderより外側に背景や画像を適用させない。
  • 上下の要素間にmarginを設定し、相殺させてより広い方を適用させる。
  • 負の数値が使用できる。
  • margin-right:auto;``margin-left:auto;を利用することにより、中央に配置できる。

padding

  • paddingを設定させることにより、背景や画像をborderまで適用させる。
  • 上下の要素間にpaddingを設定し、両方の広さ分スペースを取らせる。
  • 負の数値が使用できない。
  • autoが使用できない。

その間にborderを設定します。

忘れやすいので、内側から頭文字をとってパボマと変な覚え方をしています。