余白をマスターしよう!marginとpaddingの使い分け

  • このエントリーをはてなブックマークに追加
  • LINEで送る

こんにちは!

今回はコーディング時の余白設定についてまとめていきたいと思います。

実際に生徒さんからも質問をよくいただき、悩みの種になりやすい余白・・・

このブログを読めば理解が深まる!

こと間違いなしですので、是非最後までお付き合いください^^

marginとpaddingの違いを理解しよう

cssで余白を設定する際に、margin、paddingを使用しますよね。

両方余白です。

ここに余白つけたい!
間隔をあけたい!
だけど・・・margin、paddingどっち使えばいいんだろう・・・

こんなお声がちらりほらり。
まずはmargin、paddingの違いをしっかり学びましょう。

余白について

↑↑
「余白について」という文章。(pタグで記述)

これはpadding、margin両方設定されています。

/* cssは↓↓ */
p{
 width: 10em;
 padding: 100px;
 margin: 100px auto;
 text-align: center;
 background: #00ff00;
 border: #555 10px solid;
}

文字周り、背景色の緑色が表示されている領域が、paddingです。

その周りに境界線があり、さらにその外側、背景色が何もない部分がmarginです。

つまり、境界線の内側がpadding、境界線の外側がmarginです。

境界線の内か、外か、ということで
padding→内余白
margin→外余白

とも呼びますよね。

ということでまとめると・・・

padding
border(境界線)の内側
背景を表示できる
margin
border(境界線)の外側
背景は表示できない

背景も境界線もない場合

margin、paddingの違いは分かったけど、それでもどっち使えばいいか迷う!

そんな声も聞こえてきそうです。

そう、背景も、境界線も設定しない場合。

①この文章と

②この文章の間を2文字分余白とりたい

上記の文章。
①と②の間に余白をとる場合。

背景も、境界線もありません。

ですので、marginを設定しても、paddingでもレイアウトは変わりません!

つまり、

p{
 margin: 0 0 2em;
}

でも良いですし、

p{
 padding: 0 0 2em;
}

でもOKです。

marginの相殺

※ 本章は動画の方がわかりやすいと思います!

余白設定したのに、うまくいかない・・・

こういうケースもありますよね。

もう一度、

①この文章と

②この文章の間を2文字分余白とりたい

について考えてみたいと思います。

先ほどは、paddingでも、marginでもOK、ということで下余白を2文字分設定しました。

そうではなくて、上下余白を1文字分にするとどうなるでしょうか?

①の文章の下に1文字分の余白、②の文章の上に1文字分の余白。
足し算して、2文字分の余白が文章間に設定されるはずです。

実際にやってみたのが↓↓

①この文章と

②この文章の間を2文字分余白とりたい

わかりやすいように文字色を変えてみました。

どうでしょう?
少し余白が小さく感じませんか?

設定した余白は↓↓です。

p{
 margin: 1em 0;
}

上下余白を1文字分とし、足し算して2文字分になる・・・
かと思いきや、実は1文字分の余白しかあきません。

こちら、marginの相殺、と呼ばれるもの。

marginを設定する場合、連続する要素の余白が重なってしまう、という問題です。

つまり今回の場合、①の下余白1文字分と、②の上余白1文字分が重なってしまっているんですね。

ということで、marginを設定する場合は、上下余白を設定するのではなく、上か下かにまとめて記述することをお勧めします。

親要素、子要素間のmargin相殺

実はmarginの相殺・・・

連続する要素同士だけではなく、親要素、子要素間でも起こります;_;

まずは↓↓を見てください。

余白について

//html
<div>
 <p>余白について</p>
</div>

/* css */
div{
 max-width: 10em;
 padding: 100px;
 margin: 100px auto;
 text-align: center;
 background: #00ff00;
 box-sizing: content-box;
}
div p{
 margin: 0;
}

最初の例文とほぼ同じです。
今回は、divタグの中に、pタグを設置しました。

divタグに対して余白や背景色を設定しています。
今回は境界線はありません。

緑色の背景色の領域。
ここはdivに対してpaddingを設定してるんですね。
これを変えてみたいと思います。

文字の下側の余白、divのpadding下余白をゼロにし、代わりにpタグのmargin下余白を設定したらどうなるのか?

同じ数値を設定すれば、レイアウトは変わらないはず・・・

実践したのが↓↓

余白について

/* css */
div{
 max-width: 10em;
 padding: 100px 100px 0;
 margin: 100px auto;
 text-align: center;
 background: #00ff00;
 box-sizing: content-box;
}
div p{
 margin: 0 0 100px;
}

なんだか要素が小さくなってしまいました・・・

これもmarginの相殺が影響しています。

何が起きているかというと、子要素であるpタグのmarginと、親要素であるdivタグのmarginが重なってしまったのです。
(これも動画で見ていただけるとわかりやすいです。)

重なってしまった部分、pタグの余白がdivタグの外に飛び出してしまい、その分背景領域も消えてしまいました。

ということでこのケースの場合、子要素にmarginを設定するのではなく、親要素にpaddingを設定すればOK。
最初の状態ですね。

他にもcssで、
display: 〜〜
を書き足せば解決!

など方法はいくつもあります。

私の場合は、marginで起こる問題なら、paddingに置き換えちゃおう〜〜という感じです^^

最後に

marginの相殺!!
なんやそれっ泣

な方もいたのではないでしょうか?

だからうまくいかなかったんか〜〜

とモヤモヤが晴れた方もいるかもしれませんね。

私自身、

「あ!崩れた!
ここはmarginの相殺だな。
paddingに置き換えよう。
余白設定するタグも変えよう。」

などコーディングしながら修正すること、本当に多いです。

崩れても、やり直せばOK。

ただ、原因もわからないまま進めるより、原因が分かった方が、気持ちもスッキリしますし、コーディングに対する苦手意識も薄れていくと思います。

是非、原因を探る、ということも忘れないでくださいね^^

最後に、こちらのブログも余白に関するものなので、お時間あれば見てみてください。

ではでは〜〜(ノω`)ノシ

  • このエントリーをはてなブックマークに追加
  • LINEで送る

SNSでもご購読できます。

コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください