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

cssのmarginとpaddingの使い方まとめ ブログ運営
Photo by Kobu Agency on Unsplash
SponserLink

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

 

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

 

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

cssのmarginとpaddingの違い

 

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

 

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

 

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

SponserLink

marginとは?paddingとは?

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

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

marginとpaddingの違い

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

 

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

 

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

 

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

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

 

例えば、

padding:10px
margin:10px

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

marginとpaddingを全て10pxで指定した場合

 

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

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

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

marginとpaddingで幅の指定方法を上下と左右で分ける方法

 

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

 

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

  • 値が1つの場合、上下左右のいずれも同じとなります
  • 値が2つの場合、上下が1つ目の値、左右が2つ目の値となります
  • 値が3つの場合、上が1つ目の値、左右が2つ目の値、下が3つ目の値となります
  • 値が4つの場合、上が1つ目の値、右が2つ目の値、下が3つ目の値、左が4つ目の値となります

 

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

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

 

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

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

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

margin-top,leftとpadding-top,leftの指定例

 

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

marginとpaddingの上下左右の余白の指定方法

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

 

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

margin使用時の注意点

 

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

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

 

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

marginの相殺例

 

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

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

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

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

 

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

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

paddingでは相殺は起きない

 

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

 

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

 

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

[CSS]marginの相殺を正しく理解しておこう!相殺はいつ起こるのか、相殺を回避するテクニック
まずは、クイズ。 Aのdiv要素には「margin-bottom: 10px;」を、Bのdiv要素には「margin-top: 30px;」を指定した場合、それらを垂直に配置するとマージンはいくつでし

 

まとめ

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

marginとpaddingの設定する値の数による上下左右の設定

  • 値が1つの場合、上下左右のいずれも同じとなります
  • 値が2つの場合、上下が1つ目の値、左右が2つ目の値となります
  • 値が3つの場合、上が1つ目の値、左右が2つ目の値、下が3つ目の値となります
  • 値が4つの場合、上が1つ目の値、右が2つ目の値、下が3つ目の値、左が4つ目の値となります

 

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

marginとpaddingの上下左右の余白の指定方法

 

ブログ運営

関連おすすめ記事

宜しければシェアをお願い致します
運営者プロフィール
jin

妻と娘の3人で暮らしています。
「お金、時間、そして家族を大事にしたい」と考えるパパにとって、少しでもプラスになれたらいいなと思って情報発信しています。宜しくお願い致します。

jinをフォローする
ぱぱたす(PaPa+)

コメント