やぁ、結構人見知りのユトピ(@yutopi60pa)だよ。
セブンイレブンの黒糖マーガリンパン美味しいよね。100円なのに4つ入ってるとかコスパ良すぎ。2日はもつね。
というわけでどういうわけで、今回はCSSで余白を設定できるプロパティ「margin」と「padding」について解説していくよ！
二つのプロパティはどちらも余白を設定できる効果があるけど、明確な違いがあるからしっかりと理解しておきましょう！
目次
余白とは？
プロパティの説明に入る前にまず、「余白」とはなんでしょうか？
といっても難しく考えることはなく、余った部分のことですね。
余った部分だからと言ってあなどってはいけません！
余白にはサイトを見やすくしたり、文字を読みやすくしたり、はたまた余白に意味を持たせたりなど、デザイン上では非常に重要な要素の一つなんです。余白のあるなしや、広さが少し違うだけで伝わり方が全く違うことなんてよくあります。
ではHTMLにおいての余白についてみていきましょう！
このような幅が150px、高さが100pxのボックスがあったとしましょう。
このうちwidthに当たる部分はご覧のとおりボックスの幅ですね。heightも同様にボックスの高さです。
borderはボックスの縁や枠線のことです。この枠線がmarginとpaddingを理解するうえで重要になっていきます。
このborderを境に内側の緑色の部分がpaddingで設定できる余白です。
そしてborderの外側、つまりボックスの外側にあるオレンジ色の部分がmarginで設定できる余白です。
このようにmarginとpaddingは同じ余白を指定できるのですが、ボックスに対して外側か内側かで大きく違います。
この点をしっかりと理解して次からの解説に進んでいきましょう！
marginとは？
さて、先ほどのところでmarginについて理解してもらったところで、ここでは一つ一つ見ていきましょう。
CSSプロパティの「margin(マージン)」とは、ボックスに対して外側の余白を設定できるプロパティです。
指定はpx(ピクセル)か%(パーセント)を使った数値で、上下左右の余白を指定していきます。
marginの使い方
次に使い方ですが、これはmarginは4つの指定方法があります。
- 例：「margin: 10px;」 この場合は上下左右10px分の余白が空きます。
- 例：「margin: 10px 20px;」 この場合は上下に10px、左右に20px分の余白が空きます。
- 例：「margin: 10px 40px 70px;」 この場合は上に10px、左右に40px、下に70px分の余白が空きます。
- 例：「margin: 10px 20px 30px 50px;」 この場合は上に10px、右に20px、下に30px、左に50px分の余白が空きます。
このような感じで指定することができます。
最後の4つ指定した場合は上→右→下→左と順番に指定されますが、これは時計回りでの順番なので、そのように覚えておけばすぐに理解しやすいと思います。
それでは実際にやってみましょう！
marginを使ってみよう！
marginに1つ数値を指定
余白無し
コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
CSS #ma1 { margin: 20px; width: 80%; height: 200px; background: orange; } .kara { width: 80%; height: 200px; background: lightblue; } HTML <div class="kara"></div> <div id="ma1"></div> <div class="kara"></div> |
結果
marginに2つ数値を指定
コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
CSS #ma2 { margin: 20px 10px; width: 80%; height: 200px; background: orange; } .kara { width: 80%; height: 200px; background: lightblue; } HTML <div class="kara"></div> <div id="ma2"></div> <div class="kara"></div> |
結果
marginに3つ数値を指定
コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
CSS #ma3 { margin: 20px 10px 40px; width: 80%; height: 200px; background: orange; } .kara { width: 80%; height: 200px; background: lightblue; } HTML <div class="kara"></div> <div id="ma3"></div> <div class="kara"></div> |
結果
marginに4つ数値を指定
コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
CSS #ma4 { margin: 20px 10px 40px 30px; width: 80%; height: 200px; background: orange; } .kara { width: 80%; height: 200px; background: lightblue; } HTML <div class="kara"></div> <div id="ma4"></div> <div class="kara"></div> |
結果
どうです？
余白がわかりやすいように上下に中身の無い「.kara」というブロック要素を置きました。
この要素との間の余白や、左右の余白が空いているのわかりましたか？このようにしてmarginで余白を指定することができます。
またこれを応用すれば、余白を大きくとって好きなところに要素を配置させることもできます。
ネガティブマージンのやり方
marginには他にもネガティブマージンというものがあります。(マイナスマージンともいいます)
先ほどまではmarginに指定した数字は正の数でしたよね？ネガティブマージンの場合は負の数、つまりマイナスの数字を指定するやり方です。
マイナスの数値を指定するとどうなるかというと、例えば上に-10px分の余白を指定した場合、ボックスが10px上へ動きます。
同様に左に-20pxを指定すると、左へ20px動きます。
正の数ではその逆に動いていたのがデモでわかったと思います。ネガティブマージンは余白を空けず、間が詰まっていくのが特徴です。
それでは実際にやってみましょうか！
ネガティブマージンを指定！
margin: -20pxを指定
コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
CSS #ma5 { margin: -20px; width: 80%; height: 200px; background: orange; } .kara { width: 80%; height: 200px; background: lightblue; } HTML <div class="kara"></div> <div id="ma5"></div> <div class="kara"></div> |
結果
margin: -20px -30px -10px -40pxを指定
コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
CSS #ma6 { margin: -20px -30px -10px -40px; width: 80%; height: 200px; background: orange; } .kara { width: 80%; height: 200px; background: lightblue; } HTML <div class="kara"></div> <div id="ma6"></div> <div class="kara"></div> |
結果
このようにネガティブマージンを指定すると余白は空かずに詰まっていきます。
なので上下のブロック要素と重なってしまっているわけですね。
これがネガティブマージンです。
ですが、あまり多用しすぎると管理が大変になることがあるので、どうしても使わなきゃいけないとき以外はあまり使わない方がいいですね。
そのほかのmarign関連プロパティ
marginには同じように余白を指定できるプロパティが4つあります。
- 上のみ余白を指定できる。
- 下のみ余白を指定できる。
- 右のみ余白を指定できる。
- 左のみ余白を指定できる。
これらのプロパティはmarginと同じようにpx(ピクセル)や%(パーセント)で指定できます。ただし数値は1つだけ。
基本的にmarginと機能は同じなので、どちらを使うかは1つの方向にだけ余白を指定したい場合など、状況次第で変えていきましょう。
marginの注意点
最後にmarginの注意点を紹介しましょう。
marginは別々の要素の上の余白と下余白がが重なり合った場合、加算せれずに相殺されます。
それでは実際にやってみましょう！
marginの相殺
上下の余白が重なると相殺されるよ！
コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
CSS #ma7 { margin-bottom: 50px; width: 80%; height: 200px; background: orange; } #ma8 { margin-top: 50px; width: 80%; height: 200px; background: orange; } HTML <div id="ma7"></div> <div id="ma8"></div> |
結果
これは二つの50pxのmarginがあるので、余白は100pxになるような気がしますが、これは相殺されて50pxとなるので、注意してください。
ちなみに同じ数字ではなく、異なる数字だった場合は大きい方のmarginが採用されます。
上下の余白がぶつかり合った場合は相殺しますが、左右の余白の場合はこのようなことは起きません。
ですので、上下の余白を指定するような場面ではこの注意点を意識しながらコーディングをしていきましょう！
paddingとは？
CSSプロパティ「padding(パディング)」とは最初の説明のとおり、ボックスの内側の余白を指定します。
指定はpx(ピクセル)と%(パーセント)を使った数値で、上下左右の余白を指定できます。
paddingの使い方
paddingはmarginと同じように4つの指定方法があります。
これはmarginとセットで覚えてしまいましょう。
- 例：「padding: 10px;」 この場合は上下左右10px分の余白が空きます。
- 例：「padding: 10px 20px;」 この場合は上下に10px、左右に20px分の余白が空きます。
- 例：「padding: 10px 40px 70px;」 この場合は上に10px、左右に40px、下に70px分の余白が空きます。
- 例：「padding: 10px 20px 30px 50px;」 この場合は上に10px、右に20px、下に30px、左に50px分の余白が空きます。
それではさっそく実際に使ってみましょう！
paddingを使ってみよう！
paddingに1つ数値を指定
余白無し
コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
CSS #pa1 { padding: 20px; width: 100%; height: 50px; background: orange; } .kara { width: 100%; height: 50px; background: lightblue; } HTML <div class="kara"></div> <div id="pa1"></div> <div class="kara"></div> |
結果
paddingに2つ数値を指定
コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
CSS #pa2 { padding: 20px 10px; width: 100%; height: 50px; background: orange; } .kara { width: 100%; height: 50px; background: lightblue; } HTML <div class="kara"></div> <div id="pa2"></div> <div class="kara"></div> |
結果
paddingに3つ数値を指定
コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
CSS #pa3 { padding: 20px 10px 40px; width: 100%; height: 50px; background: orange; } .kara { width: 100%; height: 50px; background: lightblue; } HTML <div class="kara"></div> <div id="pa3"></div> <div class="kara"></div> |
結果
paddingに4つ数値を指定
コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
CSS #pa4 { padding: 20px 10px 40px 30px; width: 100%; height: 50px; background: orange; } .kara { width: 100%; height: 50px; background: lightblue; } HTML <div class="kara"></div> <div id="pa4"></div> <div class="kara"></div> |
結果
分かりやすいようにmarginの時とはボックスの高さを変えてあります。
このようにオレンジのボックスの内側に余白が入っているのがわかると思います。
このようにして文字や画像の位置を調整すれば、よりユーザーにとって見やすいデザインをすることができます！
そのほかのpadding関連プロパティ
paddingにはmarginと同じように関連した4つのプロパティがあります。
marginと同じですね。指定できる数値は1つだけ。
こちらもpaddingだけで事足りてしまいますが、1つの方向にだけ余白を指定したい場合など、状況に応じては使い分けていきましょうね。
paddingの注意点
paddingの注意点ですが、先ほどmarginのところで「ネガティブマージン」を紹介しました、paddingに関してはそのようなやり方はありません。
もしマイナスの数値を指定した場合、エラーになってなにも起きません。
たまに勘違いしている人がいるので、注意しておきましょう！
インライン要素での注意点
ここで説明することは以前書いて記事でも紹介していますので、詳しいことはそちらをご覧ください。
・あなたは大丈夫？”ブロック要素”と”インライン要素”の違いを理解しよう。【お母さんにもできるHTML入門】
どういうことかといいますと、インライン要素(aタグやspanタグなど)に余白を指定した場合、くせのある動きをします。
具体的にはこんな感じ。
インライン要素のmarginの場合、上下は効かず、左右のみ余白を空けることができます。
インライン要素のpaddingは上下左右指定できますが、上下は見た目上は余白がとられません。上下に文章と重なってしまってますね。
要するに上下のpaddingは効かないと同じです。
このようにインライン要素にmarginやpaddingを使用する場合は独自のくせみたいなものがありますので、コーディングする際は気をつけながらやっていきましょうぜ！
まとめ
以上がmarginとpaddingの解説でした。
どちらも同じ余白に関するCSSプロパティでしたが、どちらも使いどころが微妙に異なってくるので、自分で実際に使ってみてその見極めをしていくことが大事ですね。
指定方法などすこしとっつきにくいところもあると思いますが、今回あげた注意点だけ気をつけていれば意外と簡単にできるのでぜひチャレンジしてみてくださいね！！