余白を指定するにはmarginかpamdingを使用します。
これら2つは大体同じ役割を果たしますが、もっと綺麗なコードでwebページを作成したい方は、適切な使い分けをマスターしましょう。
使い分け① : 兄弟or親子
兄弟関係
余白を設けたい箇所が隣接し合う関係、つまり兄弟関係の場合はmarginを使用しましょう。
※分かりやすいように少しcssを加えます。
<div>親だよ
<div>兄だよ</div>
<div>弟だよ</div>
</div>
このように上下もしくは左右に隣接し合う関係を離したい場合はmarginを使用します。
<div>親だよ
<div style="margin:20px 40px;">兄だよ</div>
<div style="margin:20px 40px;">弟だよ</div>
</div>
もしpaddingを使用した場合は、余白を作ることはできますが、
以下のようにborderがくっついてしまいます。
borderがなければ見た目上問題はありませんが、綺麗ではありません。
<div>親だよ
<div style="margin:20px 40px;">兄だよ</div>
<div style="margin:20px 40px;">弟だよ</div>
</div>
親子関係
余白を設けたい箇所が親子関係の場合はpaddingを使用しましょう。
<div>親だよ
<div>子だよ</div>
</div>
このようになります。
<div style="padding:20px 40px;">親だよ
<div>子だよ</div>
</div>
大きなメリットとして、子要素をたくさん増やしても、このように親要素だけの指定でまとめることができます。
<div style="padding:20px 40px;">親だよ
<div>子1だよ</div>
<div>子2だよ</div>
<div>子3だよ</div>
<div>子4だよ</div>
<div>子5だよ</div>
</div>
使い分け② : borderの内外
marginはボックスの外側
paddingはボックスの内側に余白を設けます。
これらは余白の基本なので良く聞くと思いますが、分かりにくいと感じるかも知れません。
そんな時は、borderもしくは背景色が必要かどうかでmarginを使うか、paddingを使うか考えてみましょう。
以下の横並びのボックスにborderを付けてみましょう。
<div>
<div>左</div>
<div>右</div>
</div>
では、これにmarginをつけたバージョンと、paddingをつけたバージョンで比較してみましょう。
margin : 10px 20px ;
<div>
<div style="margin: 10px 20px;">左</div>
<div style="margin: 10px 20px;">右</div>
</div>
padding : 10px 20px ;
<div>
<div style="padding: 10px 20px;">左</div>
<div style="padding: 10px 20px;">右</div>
</div>
2つを見比べてみて違いは一目瞭然だと思います。
ボックスの外側と内側はこのようにborderをつけることで明瞭的になります。
使い分け③ : 背景色の有無
背景色も同様です。
<div>
<div>背景色</div>
</div>
margin : 10px 20px ;
<div>
<div style="margin: 10px 20px;">背景色</div>
</div>
padding: 10px 20px ;
<div>
<div style="padding: 10px 20px;">背景色</div>
</div>
このように「背景色」文字の位置は変わりませんが、背景の青色の範囲が違うのがわかります。
デザイン観点からみてこのような場合にはpaddingを使用する場合が多いでしょう。
背景色が不要ならmarginでも構いません。
使い分け④ : 横幅指定の範疇
box-sizing : border-box;の場合で、余白を付与した際に横幅widthに含むかどうかで判断しましょう。
横幅(200px)が同じボックスを3つ並べてみます。
※わかりやすいように背景色を付与します。
<div>赤</div>
<div>青</div>
<div>緑</div>
では、青のボックスにmargin:0 20px;をつけてみましょう。
特に何も変わりません。
では、緑のボックスにpadding: 0 20px;をつけてみましょう。
このように、box-sizing : border-box; を指定している時はpaddingとborderはwidthの値の中に含まれます。
marginはwidthの値に含まれることがないので、widthの値に含めるかどうかで、marginとpaddigを使い分けましょう。
最後に
極論ではありますが、
marginでもpaddingでも見た目上では変わりがない時があります。
しかし、デザインが変わることがあるかも知れません。
見るデバイスによっては表示崩れがあるかも知れません。
綺麗なコードを描き、一流のコーダーになるためには適切に使い分けましょう。
以上、marginとpaddingの違い、適切な使い分けでした。