犬の手も借りたいあなたに最適な記事を届けます

marginとpaddingの上手な使い分け

余白を指定するには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>
親だよ  
子1だよ
 
子2だよ
 
子3だよ
 
子4だよ
 
子5だよ

使い分け② : 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の違い、適切な使い分けでした。