違いを解説君

あるゆる物事の"違い"をわかりやすく解説する情報マガジン

スクリプト

ITの違い

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

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

 

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

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

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

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

たろう
はなこ
『margin』と『padding』の違いについて調べてみたいわね。

 

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

スポンサーリンク

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

『CSSCascading 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デザイン

Webデザイン

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

『margin』を使った例

<table style="margin: 20px 0px;">
<tbody>
<tr>
<td>Content</td>
</tr>
</tbody>
</table>

Content

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

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

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

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

また、

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

 

『padding』を使った例

<table>
<tbody>
<tr>
<td style="padding: 20px 0px;">Content</td>
</tr>
</tbody>
</table>

Content

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

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

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

 

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

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

 

はなこ
これで、CSSをきちんと書くことができそうね。
ボックスの枠の部分は『border』だったよね。

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

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

たろう

スポンサーリンク

まとめ

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

ポイント

  • 『margin』と『padding』は、ボックスモデルに対する間隔を指定するために使われる。
  • 『margin』は、枠の外側、『padding』は枠の内側の幅を指定するためのプロパティである。
  • 『margin』も『padding』も、ほぼ全ての要素に対して利用することができる。

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

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

関連記事

-ITの違い

Copyright© 違いを解説君 , 2019 All Rights Reserved.