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

CSSを記述するところで『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』の使い分け方

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

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

スポンサーリンク
まとめ
今回のポイントについて、まとめていきましょう。
ポイント
- 『margin』と『padding』は、ボックスモデルに対する間隔を指定するために使われる。
- 『margin』は、枠の外側、『padding』は枠の内側の幅を指定するためのプロパティである。
- 『margin』も『padding』も、ほぼ全ての要素に対して利用することができる。
CSSをうまく活用すれば、HTMLが非常に見やすく、見た目も華やかにすることができます。
CSSで使われるプロパティを理解して、上手に活用するようにして下さい。