marginとpaddingについて

最終更新日

WEBサイト上で余白を表す「margin」と「padding」について解説していきます。

「margin」と「padding」はそれぞれ余白になる場所が異なります。

目次

  1. 1. margin
  2. 2. padding
  3. 3. marginは上か下か？
  4. 4. まとめ

1. margin

marginは「要素の外側の余白」を表します。
要素の外側に余白を設定したい場合は、「margin」を使用します。

2. padding

paddingは「要素の内側の余白」を表します。
要素の内側に余白を設定したい場合は、「padding」を使用します。

3. marginは上か下か？

縦に並んだボックスの間に余白を設定する際、上のボックスに「margin-bottom」を設定するか下のボックスに「margin-top」を設定するかで悩むことがあるかと思います。

結果はどちらも一緒ですが、その時々で上につけたり下につけたりしていると、どのmerginが効いているのか分からなくなるので、どちらかに基準を決めておくとよいでしょう。

例えば、基本は下にとりつつ必要に応じて上にとるという風に基準となるルールを決めておくとコードの管理がしやすくなります。

4. まとめ

「margin」と「padding」について解説してきました。

margin と padding はどちらも余白の設定を表しますが、marginが「要素の外側の余白」を表すのに対し、paddingは「要素の内側の余白」を表します。

余白を設定する際は、要素の内側か外側かを意識しながら、適切なプロパティを選択しましょう！

関連記事