【CSS】marginとpaddingの違いをわかりやすく解説！使い分けは必要？

あなたは、CSSについてどのくらい理解していますか？

はなこ

この間、会社でWebのデザインを頼まれたの。

CSSを記述するところで『margin』と『padding』の違いが分からなくて困ったわ。

どちらも、余白を指定する時に使うプロパティだね。

でも、違いについては僕もあまり知らないな。

たろう

はなこ

『margin』と『padding』の違いについて調べてみたいわね。

今回は、CSSで使われるプロパティの『margin』と『padding』について、その違いを解説します。

【CSS】『margin』と『padding』の違い

『CSS（Cascading Style Sheets）』とは、『HTML（HyperText Markup Language）』と対になるWeb構築には欠かせない言語ですね。

主に、

Webのデザインを定義するため

に使われます。

この『CSS』の中には、『ボックスモデル』に対するプロパティがたくさんあります。

『ボックスモデル』とは、『HTML』の中によく見られる構造で、Web画面のレイアウトは通常、四角い枠（枠で仕切られる場合もあれば、ない場合もあります）で構成されています。

この四角い枠のことを『ボックスモデル』と呼びます。

『ボックスモデル』に対応するプロパティは次のようになります。

ボックスモデル

『border』領域は、枠の部分を表します。

例えば、『表（table）』などは枠が表示されますよね。

あの部分が『border』になるわけです。

その内側に『padding』があります。

そして、外側に『margin』があります。

つまり、

『margin』は、枠の外側、『padding』は枠の内側の幅を指定するためのプロパティである

ということになります。

より詳しく見ると、実際に絵や文字が書かれている部分（Content）と『border』の間の間隔が『padding』になり、ブラウザの端や他のボックスモデルとの間隔が『margin』になるということですね。

はなこ

なるほど、『margin』は枠外の間隔、『padding』は枠内の間隔と覚えればいいのね。

そうだね。

きちんと区別して使わないと、きれいなレイアウトにはならないから、非常に重要なプロパティだね。

たろう

『margin』と『padding』の使い分け方

Webデザイン

実際に、『margin』と『padding』を使い分けてみましょう。

上の例は、表の枠外に対して『margin』を使って間隔を指定しています。

『margin: 20px 0px』と書かれていますが、1番目の 20px が上下の、2番めの 0px が左右の間隔を表しています。

なので、上下は20ピクセル分、左右は間隔なしと指定したことになりますね。

『margin: 20px』とプロパティをひとつだけ指定した場合、上下左右すべての間隔をひとつの値で示したことになります。

また、

『margin: 20px 0px 20px 0px』と4つ指定すると、上、右、下、左の順で個別に指定したことになります。

今度は、『padding』を使って枠内の間隔を指定した例です。

『padding: 20px 0px』と書かれているので、上下を20ピクセル分、左右を間隔なしで指定したことになりますね。

『margin』のときは、表を表す『table』に対して定義をしましたが、今回はセルを表す『td』に対して定義をしています。

『margin』も『padding』も、ほぼ全ての要素に対して利用することができます。

HTMLのレイアウトを決める重要なプロパティなので、違いを理解してきちんと使い分けるようにしましょう。

はなこ

これで、CSSをきちんと書くことができそうね。

ボックスの枠の部分は『border』だったよね。

『border』についても太さが指定できるし、枠に使う線の色やパターンも変えられるみたいだよ。

これも、うまく活用したいね。

たろう

スポンサーリンク

まとめ

今回のポイントについて、まとめていきましょう。

CSSをうまく活用すれば、HTMLが非常に見やすく、見た目も華やかにすることができます。

CSSで使われるプロパティを理解して、上手に活用するようにして下さい。