こんにちは！
今回はコーディング時の余白設定についてまとめていきたいと思います。
実際に生徒さんからも質問をよくいただき、悩みの種になりやすい余白・・・
このブログを読めば理解が深まる！
こと間違いなしですので、是非最後までお付き合いください^^
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→外余白
とも呼びますよね。
ということでまとめると・・・
背景を表示できる
背景は表示できない
背景も境界線もない場合
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。
ただ、原因もわからないまま進めるより、原因が分かった方が、気持ちもスッキリしますし、コーディングに対する苦手意識も薄れていくと思います。
是非、原因を探る、ということも忘れないでくださいね^^
最後に、こちらのブログも余白に関するものなので、お時間あれば見てみてください。
ではでは〜〜(ﾉω`)ﾉｼ
