CSSでwebページを作成するにあたり、ボックス関連の分野は難しいと感じる方が多いと思います。それは、paddingとmarginの違いが曖昧なままだからだと考えられます。
そこで、この記事ではpaddingとmarginの違いを明確にしながら、実際の現場で活かせるように解説します。
marginとpaddingとは？
「mariginは境界線の外側の余白をつくる」、また「paddingは境界線の内側の余白をつくる」と多くの本やサイトでは説明されています。しかし、多くの方はあまり違いを考えずにこの二つのプロパティを使用しているのではないでしょうか。
paddingとmarginの使用箇所を明確に区別する必要がない箇所も確かにあります。しかし、可変するサイトを制作する場合は違いを明確にしないと、デザインが大きく崩れてしまうこともあります。ここからの解説で違いを明確にしておきましょう。
marginとpaddingで余白を設定する
borderを使用して、違いを可視化してみる
borderを使用すると、paddingとmarginの間に境界線を引くことができるので違いを可視化できます。ここで注目すべきポイントは、borderの位置がmarginとpaddingの値に依存している点です。
つまり、borderのプロパティを使う際は、marginとpaddingの値にも注意を向ける必要があるということです。以下の例のように記載すると違いがよく分かります。
参考URL：http://yoshinaga-test.aispr.jp/csstest
<div class="boxa">boxA</div>
.boxa{
margin: 20px;border: solid;background-color:yellow;
padding: 10px;
}
marginとpaddingの値を変更してみる。
次にmarginとpaddingの値を変更してみましょう。まず、paddingを使うと、境界線の内側の余白が変化しています。このことから、ボックス内の文字位置の調整に向いていることが分かります。
逆に、marginを使うと、境界線の外側の空白が変化しています。このことから、marginはボックス同士の間の余白を作るのに向いているということが分かります。
また、二つのボックスが隣接している際、marginは隣接しているmarginの中で、最大の値だけが有効になります。つまり、隣接するmarginは重なり合うということになります。
逆に、paddingはいくら大きくしても、重なり合うことはないです。このような違いから、余白の長さに変化が生じますので、注意する必要があります。以下の例のように記載すると違いがよく分かります。
参考URL：http://yoshinaga-test.aispr.jp/csstest2
<div class="boxa">boxA</div>
<div class="boxb">boxB</div>
.boxa{
margin: 20px;border: solid;background-color:yellow;
padding: 10px;
}
.boxb {
margin: 20px;border: solid;
background-color: lime;
padding: 10px;
}
レスポンシブ化に際しての注意点
paddingとmarginともに、ボックスの位置、大きさにとても影響を与えてしまうので、サイトのレスポンシブ化に際しては注意が必要です。特に余白を大きく取り過ぎるとデバイスによっては、ボックスの横幅・縦幅一方が大きくなり過ぎることもあるので、確認を怠らないようにする必要があります。
このような場合は、デバイスごとにCSSを変更してみたり、widthやheightを使って横幅、縦幅を固定してあげると良いかもしれません。以下の例のように記載し、PC画面とスマホ画面を比べてみるとよく分かります。PC画面とスマホ画面の両方で確認してみましょう。
参考URL：http://yoshinaga-test.aispr.jp/csstest3
<div class="boxa">boxA</div>
.boxa{
margin: 20px;border: solid;
background-color:yellow;
padding: 10px;
}
@media screen and (max-width:640px){
.boxa {
width: 70%;
margin-left: 50px;
}
}
まとめ
ここまでのことをまとめると、marginとpaddingについては、
・borderを意識してみると違いが分かる
・paddingは文字位置の調整に向いている
・marginはボックス同士の間における余白の調整に向いているが、隣接している場合重なり合うので、注意する
・レスポンシブ化する際は、デバイスごとにバランスが崩れてないか確認してみる
marginとpaddingの違いが明確に分かってくると、作業の効率化だけでなく、サイトのレイアウトのバリエーションも増えると思うので、是非理解しておきましょう。
