cssのmarginとpaddingの違いと共通点、使用時の注意点まとめ

ブログを運営している方は、ブログのcssを見るとmarginとpaddingは、よく目にする単語だと思います。

余白ってことは理解していても、どっちがどこの余白か分からなくなることってありますよね。

marginとは「border(境界線)の内側の余白」のことで、paddingとは「border(境界線)の外側の余白」のことです。

marginとpaddingは、違うものですが、cssの余白の指定方法など、共通点も多いです。

というわけで、今回は、marginとpaddingの違い、共通点などについてまとめてみました。また、それぞれの使い方をご紹介するとともに、使用時の注意点についてまとめました。

cssのmarginって何？paddingって何？と思っている方の参考になれば幸いです。

marginとは？paddingとは？

marginとpaddingは間違えやすいですが、border(境界線の)内か外かの違いです。

• margin：border(境界線)の内側の余白
• padding：border(境界線)の外側の余白

borderは要素の周りの境界線のことです。borderを境に内側がmargin、外側がpaddingというわけです。

paddingとは英語で、「詰め物」や「穴埋め」といった意味があります。要素(content)と境界線(border)の間の余白を詰めるのがpaddingというイメージですね。

marginとは英語で、「余白」、「欄外」といった意味があります。こちらはそのままのイメージですね。

paddingとmarginの余白の指定方法は同じ

paddingとmarginの余白の指定方法は同じです。

例えば、

padding:10px
margin:10px

と指定すると、全ての要素に対する全てのmarginとpaddingが10pxとなります。

また、「上下の幅は10pxがいいけど、横幅は20pxにしたい」なんてときは、

padding:10px 20px
margin:10px 20px

と指定すると、以下のようにpaddingとmarginの横幅が20pxとなります。

このように、paddingとmarginは設定する値の数によって、上下左右の余白の値を指定できます。

設定する値の数でどの場所が指定されるかは以下の通りです

paddingとmarginの場所を指定して余白を設定する

先ほどの引数の数で指定する方法以外にも、場所を指定して、余白を決めることも可能です。

例えば、paddingとmarginの上の余白を10px、左の余白を20pxとしたい場合、

padding-top:10px
padding-left:20px
margin-top:10px
margin-left:20px

と指定すると、上と左の余白のみ10pxとなります。

このように、paddingおよびmarginでそれぞれ、上下左右を指定するためのプロパティが決まっています。

ここでも、marginとpaddingは共通している部分が多く、topやleft等の”-“（ハイフン）以降の単語は同じです。

特定の場所のみ余白を入れたいという場合は場所を指定して、余白を設定するのが便利です。

margin使用時の注意点

縦方向で重複すると値の大きい方が有効となる

marginで、縦方向の重複が起きると、値が大きい方が有効となります。値が小さい方は、大きい方に相殺されて、無効となります。

あるmarginで20pxが設定されていて、その縦方向にあるmarginでは10pxが設定されていた場合、10pxは無効（相殺）となり、20pxのみが有効となります。

この例のように、marginは縦方向での相殺は発生します。しかし、横方向での相殺は起きません。

横方向で相殺が起きない理由は以下のサイトの解説がわかりやすかったです。

ブロック要素では通常フローしたブロック要素は必ずその下に次のブロック要素が来ます。その為通常フローしたブロック要素同士の場合は上下のマージン相殺しか起こりません。つまり横には並ばないので左右のマージン相殺はそもそも起こらないのです。

引用 入れ子状態のブロック要素の上下マージンの困った挙動（マージンの相殺）

paddingの場合は縦でも横でも重複しない（相殺なし）

marginは相殺が起きるのに対して、paddingでは相殺は起きません。

つまり、paddingの場合は指定した余白が必ず確保されるというわけです。

また、paddingとmarginの組み合わせでも相殺は起きません。あくまで、marginとmarginが垂直方向（上下）に並んだ場合のみ相殺が起きます。

marginの相殺に関してはこちらの記事が詳しくて、わかりやすいです。

[CSS]marginの相殺を正しく理解しておこう！相殺はいつ起こるのか、相殺を回避するテクニック

marginの相殺について、まずはクイズ。Aのdiv要素には「margin-bottom:10px;」を、Bのdiv要素には「margin-top:30px;」を指定した場合、それらを垂直に配置

coliss.com

まとめ

cssのmarginとpaddingの違いと共通点、使い方についてご紹介しました。

余白の場所を指定したい場合は、以下のモデル図を参考に指定してください。