marginとpaddingの違いと使い分けを徹底解説

こんな質問がきました。「マージンとパディングの使い分け、結構雰囲気でやってしまってるんですが、どんな基準で使い分けてますか?」

marginとpaddingの使い分け、結構雰囲気でやってしまってるんですが、どんな基準で使い分けてますか?

先日、Twitterでこんな質問をもらいました。HTMLとCSSを学び始めたばかりの人なら一度は考えたことのある内容ではないでしょうか?質問で勉強中の人には参考になるのではないかと思い、記事にしました。以下、質問のやりとりです。

ぷろぐらまー
ぱんだ
ぷろぐらまー ぱんだ

マージンとパディングの使い分け、結構雰囲気でやってしまってるんですが、どんな基準で使い分けてますか?

YutoSeta
YutoSeta

要素の外側の余白にはmargin、要素の内側の余白にはpaddingを使いましょう。もっと具体的にするなら、親要素と子要素の間(親子間)の余白はpadding、隣り合った要素(兄弟間)の余白はmarginを使うと迷いがないです。そうするとmarginは隣り合わせの余白だから、上方向ならmargin-topで左方向ならmargin-leftの一方向に対してのみ余白を設定すれば十分になります。コーディングの際は、先に親の余白(padding)を設定してから子の余白(margin)を設定していけば、自ずとそうなりますよ!

ぷろぐらまー
ぱんだ
ぷろぐらまー ぱんだ

なるほど! これはめちゃめちゃわかりやすい!

ボックスモデルで見た時のmarginとpaddingの違い

要素の境界線であるborderを境に外側にあるのがmarginで内側にあるのがpaddingになります。

marginとpaddingのそれぞれの特徴

margin(マージン)の特徴

  • marginは要素を上下ないし左右に移動して隣り合った要素と余白を空けるために使います。
  • marginは要素の外側にできる余白なのでmarginに背景色はつけられません。
  • 負の値(マイナスの値)をとることができます。ネガティブマージンと呼ばれ、特定の場面で使うケースがあります。
  • 横幅が固定されたブロック要素をmargin-left: auto;margin-right: auto; で水平方向に中央揃えにすることができます。
  • flexアイテムにmargin-left: auto; をつけると余ったスペース分だけ左方向に余白を吸収します。

padding(パディング)の特徴

  • paddingはその要素の内側の子要素との余白をあけるために使います。
  • paddingは要素の内側にできる余白なのでその要素の背景色と同じ色になります。paddingに直接背景色は指定できません。
  • box-sizing: border-box; の時のwidthとheightの表示領域の計算にpaddingが含まれるようになります。(下の画像参照)
  • パーセンテージ(%)で割合を指定するときに横幅をもとに計算されます(padding-top: 50%; は横幅に対して50%の余白がpadding-topに指定されます。)(参考:https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block
box-sizingをborder-boxにするとwidthとheightがpaddingの大きさを含めて計算されるようになる。

marginとpaddingを使い分けるポイント

marginとpaddingの使い分け
marginとpaddingの使い分け

paddingは親子間の余白に使い、marginは兄弟間の余白をあけるために使う

marginとpaddingを使い分けるポイントは親要素と子要素の間(親子間)の余白はpadding、隣り合った要素(兄弟間)の余白はmarginを使うというルールに従うと上手に使い分けてコーディングすることができます。こうすることで部品の再利用をする際に無駄な余白をつけずに済んだり、余白の記述が分散せずコードを管理しやすくなったりと多くのメリットがあります。

また、なるべく親要素のpaddingを設定してから、子要素のmarginを設定するするという順番でコーディングすると無意識に綺麗なコーディングができます。

margin-rightとmargin-left、margin-topとmargin-bottomのどちらを使えばよいか迷う場合

隣り合った要素の余白をつける場合に、margin-leftとmargin-right、margin-topとmargin-bottomのどちらを使えば良いのか使い分けに迷うシーンがでてきます。こういった場合は大抵はどちらでも良いケースが大半なので、特別理由がなければ、自分の中でどちらかしか使わないとルールを決めておくことでコーディング時に無駄に迷うことがなくなります。余白の方向が統一されていなくてコードが読みにくいということも起こりません。

ちなみに筆者は、marginはなるべくmargin-topとmargin-leftのみを使うというルールでコーディングしています。

今日から意識してmarginとpaddingを使い分けてみましょう!

参考資料

marginやpaddingを各方向に個別に指定する方法など詳しく解説されています。

https://web-camp.io/magazine/archives/27339

この記事をかいてみての感想

Yuto Seta
Yuto Seta

TwitterのDMでもここのコメントでも質問してこのブログを盛り上げてくれると嬉しいです。
ウェブについて勉強している読者の人もひっくるめて、一緒に駆け出しエンジニアが仕事を受注できるスキルが身に付くメディアを育てていけたらと思っています。

今回の質問者のTwitterアカウントはこちら

ぷろぐらまー
ぱんだ
ぷろぐらまー ぱんだ

Twitterアカウント:@Program_Panda

京都在住のパンダ / Vue.js / Nuxt.js/ チーム鳥獣戯画 / Something Crew / 関西クリエイターズミートアップ/朝活/ 神戸大 / Apple / Mac / iPad / iPhone @team_chojugiga#プログラミングに疲れた時にご活用ください

コメントを残す

メールアドレスが公開されることはありません。