マンガでわかるホームページ作成

CSS marginとpaddingの違い・使い分けについて

marginとpaddingはボックスの余白を調整するCSSです。

marginとpaddingの使い方や違いについて説明します。

marginとpaddingの使い方

borderを基準に
外側がmarginで
内側がpaddingです。

下記は例です。
黒線がborder
水色がmargin
「テキスト」がwidthとheight
「テキスト」とborderの間(オレンジ)がpaddingです。

テキスト

paddingはwidthやheightとの境目を表現できません。
backgroundを設定するとwidthとともに色が変わります。

marginには色を付けられません。なお、上記の例の水色は外側のboxのbackgroundです。

marginとpaddingの値

marginとpaddingの値は基本的に数値+単位となります。

margin:10px;
padding:10px;

marginとpaddingは上右下左それぞれを指定できます。

margin-top:10px;
margin-right:10px;
margin-bottom:10px
margin-left:10px;
padding-top:10px;
padding-right:10px;
padding-bottom:10px
padding-left:10px;

そしてこれらは1行で指定可能です。

全部同じとき

padding:10px
= padding:10px 10px 10px 10px
= padding:上右下左

上下と左右それぞれ同じとき

 padding:上下 左右
=padding:10px 20px
= padding:10px 20px 10px 20px

上と下が違い左右は同じとき

 padding:上 左右 下
= padding:10px 20px 30px
= padding:10px 20px 30px 20px

widthにpaddingは含まれない

widthにpaddingとborderは含まれません。

例えばwidth:100%;padding:10px;border:1px;と設定すると親要素から22pxはみ出てしまいます。

はみ出ないようにするには width:calc(100% - 22px) と設定しなくてはなりません。

width:calc(100% - 22px);
padding:10px;
border:1px solid #333;

これでもいいですが、計算が面倒ですし、paddingを直すとwidthも直さなくてはいけません。ちょっと面倒です。

box-sizing:border-boxで含める

box-sizing:border-boxが設定されていると、widthにpaddingとborderが含まれます。

例えばwidth:100%;padding:10px;border:1px;と設定しても親要素からはみ出ずに収まります。

box-sizing:border-box;
width:100%;
padding:10px;
border:1px solid #333;

paddingを直してもwidthを直さなくていいので楽です。

ただし、box-sizing:border-boxを設定してもwidthにmarginは含まれません。

marginとpaddingの違い(それぞれの特徴)

marginとpaddingは性質が似ていますが、違う部分があります。

マイナス値

marginはマイナスが使えますが、paddingは使えません。

margin:-10px
margin:-10px
padding:-10px
padding:-10px

連続したとき

margin同士がぶつかると吸収されますが、paddingは吸収されません。

margin
margin
padding
padding

auto

ブロック要素かつwidthが親要素以下の場合「margin:auto」を指定すると左右中央寄せにできます。

一方paddngにはautoという値はありません。

margin:auto
padding:auto

marginとpaddingの違いまとめ

基本マイナス値連続したときauto
margin ×吸収される
padding ×吸収されない×

関連記事