marginとpaddingの上手な使い分け

余白を指定するにはmarginかpamdingを使用します。

これら２つは大体同じ役割を果たしますが、もっと綺麗なコードで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>

<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>

２つを見比べてみて違いは一目瞭然だと思います。

ボックスの外側と内側はこのように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の違い、適切な使い分けでした。