余白関連の主なプロパティ。

CSS(カスケーディングスタイルシート)での余白関連のプロパティ(属性)について、主なものについて解説します。

以下の解説では値について一部解説を省略しております。詳細はCSSリファレンス内の各プロパティの記事をご覧ください。

CSSでの余白と枠線の概念。

CSSでは、余白と枠線について、以下のような考え方をします。

先ず、要素の内容はある幅(width)と高さ(height)を持つ領域を取ります。
それを囲む枠線をボーダ(border)と呼びます。
ボーダの幅(太さ)は上下左右の四本にそれぞれ任意の零以上の値を指定出来ます。
- ボーダが存在しない場合も、幅 0 のボーダがあると考えます。
ボーダと要素の間の余白をパディング(padding)と呼びます。
パディングの幅も上下左右にそれぞれ任意の零以上の値を指定出来ます。
ボーダの外に与えた余白をマージン(margin)と呼びます。
この空間は無色透明となります。マージンの幅は上下左右に任意の値を指定出来ます。

マージンの場合はマイナスでも構いません。

以上のように、余白と枠線は、外側から

マージン(margin)…外側の余白
ボーダ(border)…枠線
パディング(padding)…内側の余白

と言う三層になっている訳です。

マージンとパディングの違い。

上述の通り、マージンとパディングはそれぞれ外側の余白と内側の余白と言う事になりますが、この二つは枠線の外か内側かと言うだけでなく、以下のように他にも幾つもの違いがあります。

背景

パディング(内側の余白)には当該要素に指定した背景のプロパティが適用されます。
無色透明でない限り、下にある他の要素は背景で隠れる事となります。
マージン(外側の余白)は無色透明で、他の要素を隠す事はありません。

幅の値

パディングではマイナスの幅を指定する事は出来ません。
マージンではマイナスの幅を指定する事も出来ます。

埋め込みでないインライン要素での扱い

埋め込みでないインライン要素(HTML 5 ではフレージング内容要素が相当)、すなわち

などと言った、固有の高さと幅を持つインライン要素ではないインライン要素の場合、以下のような違いがあります。

マージンは内容テキスト第一文字目の左と内容テキスト最終文字の右にのみ存在し、上下マージンの概念はありません。
一方、パディングは内容テキスト各文字の上下及び第一文字目の左と最終文字の右に存在します。

HTML 5 の場合、該当するインライン要素は埋め込み内容要素以外の全てのフレージング内容要素と言いたいところですが、埋め込み内容要素にも高さと幅の概念のないものがあるため全てとは言えません。

上下に並ぶ段落類間の関係

上下に二つのブロックレヴェル要素(HTML 5 で言えば、フレージング内容要素でないフロウ内容要素が相当)が並ぶ場合、マージンは原則として値を相殺すると言う決まりがあります。

具体的には、上の要素の下マージンと下の要素の上マージンが接するとき、

双方の値が同じ符号なら絶対値の大きい方を両要素間のマージンの値とし、もう片方のマージンは無効となる
双方の値が異なるなら双方を合わせた値を両要素間のマージン値とする

と言う決まりがあります。

一方、パディングについては、その外側にやマージンがあるため、そもそも二つの要素のパディングが接する事はないため、相殺の考え方は一切ありません。

この場合ボーダの幅とマージンの幅がいずれも零の場合であっても、幅零のボーダとマージンが介在していると考えます。

尚、段落類とは、HTML 4/XHTML 1で言えばブロックレヴェル要素が該当しますが、HTML 5 にはブロックレヴェル要素の概念はありません。

`margin-○○` プロパティ(マージンの幅)。

margin-○○ プロパティとは、マージンの幅です。

○○の部分に上下左右を表す語が入り、それに依り上下左右個別にマージンを指定出来ます。

具体的には以下のようになります。

これらのプロパティの値には以下のものが取れます。

margin-○○ プロパティを指定しない場合、当該プロパティ値は 0となります。

尚、値としてマイナスを指定した場合、他の要素に重なる事もあり得ます。

巧くやればブロックレヴェル要素の排列順序を入れ替えると言う芸当も可能ですが、マイナスのマージン値は概ね位置の調整に使う事が多いようです。

`margin` プロパティ(上下左右のマージン幅の一括指定)。

margin プロパティは、上下左右のマージン幅を一括指定するプロパティの表記法です。

指定方法は一個ないし四個の数値を指定すると言うものです。

値の個数に依る指定方法は以下のようになります。

一個

上下左右に一括して同じ値を指定します。

特に上下左右のマージンをすべて無くす場合には、
```
margin: 0;
```
と記述するだけで済みます。

二個

上と下に与える値
右と左に与える値

の順に半角空白で区切って並べます。

上下のマージンが同じ値で、且つ左右のマージンも同じ(但し上下と左右では異なる)値の場合に便利です。

三個

上に与える値
右と左に与える値
下に与える値

の順に半角空白で区切って並べます。

左右のマージンは同じ値でも、上と下は異なった値にしたい場合に用います。

四個

上に与える値
右に与える値
下に与える値
左に与える値

の順に半角空白で区切って並べます。

上から時計廻りと覚えれば良いでしょう。

特に左右の値が異なった値とする場合は、左右を個別に指定するか、この記述法を用いるかのどちらかとなります。

これらの値は、margin-○○ プロパティでの値と全く同じものが取れます。

`padding-○○` プロパティ(パディングの幅)。

padding-○○ プロパティとは、パディングの幅です。

○○の部分に上下左右を表す語が入り、それに依り上下左右個別にパディングを指定出来ます。

具体的には以下のようになります。

これらのプロパティの値には以下のものが取れます。

padding-○○ プロパティを指定しない場合、当該プロパティ値は 0となります。

`padding` プロパティ(上下左右のパディング幅の一括指定)。

padding プロパティは、上下左右のパディング幅を一括指定するプロパティの表記法です。

指定方法は一個ないし四個の数値を指定すると言うものです。

値の個数に依る指定方法は以下のようになります。

一個

上下左右に一括して同じ値を指定します。

特に上下左右のパディングをすべて無くす場合には、
```
padding: 0;
```
と記述するだけで済みます。

二個

上と下に与える値
右と左に与える値

の順に半角空白で区切って並べます。

上下のパディングが同じ値で、且つ左右のパディングも同じ(但し上下と左右では異なる)値の場合に便利です。

三個

上に与える値
右と左に与える値
下に与える値

の順に半角空白で区切って並べます。

左右のパディングは同じ値でも、上と下は異なった値にしたい場合に用います。

四個

上に与える値
右に与える値
下に与える値
左に与える値

の順に半角空白で区切って並べます。

上から時計廻りと覚えれば良いでしょう。

特に左右の値が異なった値とする場合は、左右を個別に指定するか、この記述法を用いるかのどちらかとなります。

これらの値は、padding-○○ プロパティでの値と全く同じものが取れます。