marginとpaddingの基礎
marginとpaddingはCSSプロパティであり、HTML要素に対してmarginやpaddingに対して値を指定することで、その要素の余白を調整することができます。
marginとpaddingではともに余白を調整しますが、marginとpaddingで調整する余白には違いがあります。
この余白についての違いが、特に初心者には理解が難しい内容であり、marginとpaddingの違いをよく理解できていない人が多い原因でもあります。
今回は、marginとpaddingの違いについて、サルにもわかるくらい分かりやすく解説しますので、ぜひ最後までご覧ください。
marginとpaddingの違い
marginとpaddingは共に余白を調整するものですが、それぞれ調整する余白に以下のような違いがあります。
- margin ・・・・・ コンテンツとborderとの余白を調整する
- padding ・・・・・ borderの他の要素との余白を調整する
分かりやすく簡単にいうと、「marginはborderの内側の余白を調整し、paddingはborderの外側の余白を調整する」ということになります。
最初のうちは、自らの要素の内側の余白を調整したい場合はpaddingを、他の要素との余白を調整したい場合はmarginを使うことを意識すると良いでしょう。
marginとpaddingの指定の仕方
まずはmarginとpadding、それぞれの指定の仕方について解説していきます。
指定の仕方についてはmarginとpaddingの間に大きな違いはありません。
上下左右まとめて指定する
marginやpaddingに対して、1〜4つの値を指定します。
1〜4のうち、何個の値を指定するかによって左右上下のどこにどの値が適用されるかが変わってくるので、しっかり覚えて使いこなせるようにしましょう。
＜1つの値を指定する場合＞
/* 1つの値を指定すると左右上下全て指定した値が適用される */
/* 下のコードはclass="test"要素に対して、上下左右に10pxのmarginを指定している */
.test {
margin: 10px;
}
/* 下のコードはclass="test2"要素に対して、上下左右に20pxのpaddingを指定している */
.test {
padding: 20px;
}＜2つの値を指定する場合＞
/* 2つの値を指定すると、上下に1つ目の値が、左右に2つ目の値が適用される */
/* 下のコードはclass="test"要素に対して、上下に10pxのmarginを、左右に5pxのmarginを指定している */
.test {
margin: 10px 5px;
}
/* 下のコードはclass="test2"要素に対して、上下に5pxのpaddingを、左右に10pxのpaddingを指定している */
.test2 {
padding: 5px 10px;
}＜3つの値を指定する場合＞
/* 3つの値を指定すると、上に1つ目の値が、左右に2つ目の値が、下に3つ目の値が適用される */
/* 下のコードはclass="test"要素に対して、上に10pxのmarginを、左右に20pxのmarginを、下に30pxのmarginを指定している */
.test {
margin: 10px 20px 30px;
}
/* 下のコードはclass="test2"要素に対して、上に30pxのpaddingを、左右に20pxのpaddingを、下に10pxのpaddingを指定している */
.test2 {
padding: 30px 20px 10px;
}＜4つの値を指定する場合＞
/* 4つの値を指定すると、上に1つ目の値が、右に2つ目の値が、下に3つ目の値が、左に4つ目の値が適用される */
/* 下のコードはclass="test"要素に対して、上に10pxのmarginを、右に20pxのmarginを、下に30pxのmarginを、左に40pxのmarginを指定している */
.test {
margin: 10px 20px 30px 40px;
}
/* 下のコードはclass="test2"要素に対して、上に40pxのpaddingを、右に30pxのpaddingを、下に20pxのpaddingを、左に10pxのpaddingを指定している */
.test2 {
padding: 40px 30px 20px 10px;
}上下左右それぞれ個別で指定する
marginとpaddingでは、上下左右にそれぞれ個別で値を指定することもできます。
| margin | padding | |
| 上に値を指定する | margin-top | padding-top |
| 右に値を指定する | margin-right | padding-right |
| 下に値を指定する | margin-bottom | padding-bottom |
| 左に値を指定する | margin-left | padding-left |
.test-top {
margin-top: 10px;
}
.test-right {
margin-right: 15px;
padding-right: 30px;
}
.test-bottom {
padding-bottom: 10px;
}
.test-left {
margin-left: 100px;
padding-left: 500px;
}
.test-mix {
margin-top: 10px;
margin-bottom: 10px;
padding-right: 30px;
padding-left: 30px;
}paddingとbox-sizingの関係
CSSにはbox-sizingというプロパティが存在し、box-sizingでは要素の幅の計算方法を指定することができ、その計算の中にpadding（とborder）が含まれます。
特にbox-sizingに値を指定しない（初期値：content-box）場合、幅を計算したときに100％を超えてしまって画面での表示が崩れてしまうこともあります。
コーディングするときは、多くの場合box-sizingにborder-boxを指定します。
| box-sizing | 計算方法 |
| content-box | 要素の幅（高さ）100% = （content） |
| border-box | 要素の幅100% = （content + padding + border） |
box-sizing: border-box; を指定することでpaddingとborderを計算に入れることで、楽に計算することができ表示崩れが起きにくくなります。
box-sizingについては、以下の記事でわかりやすく解説しています。
>【CSS】box-sizingの使い方をわかりやすく解説。要素の幅の算出方法をマスターしよう！
margin: 0 auto; での中央寄せ
親要素より幅が小さいブロック要素に対して、margin: 0 auto; （要素の左右にmarginを自動設定）を指定することで左右中央寄せにすることができます。
また、親要素の高さが指定してある場合、margin: auto; （要素の上下左右にmarginを自動設定）を指定することで上下左右中央寄せにすることもできます。
もし、margin: 0 auto; や margin: auto; で中央寄せができない場合、幅や高さが適切に指定してあるか、インライン要素になっていないかなどを確認してみましょう。
paddingで中央寄せはできない？
「marginで中央寄せできるのならpaddingでも中央寄せできるはず！」と思う人もいるかもしれませんが、paddingで中央寄せを再現することはほとんどありません。
ある要素を中央寄せするために、親要素に対してpadding: auto; などと指定しても中央寄せにはならないため注意しましょう。（子要素にmargin: auto;を指定しましょう。）
実際のコーディングでpaddingを使って中央寄せするのは、ボタンのテキストを中央寄せする時くらいです。
コメント