CSS簡易リファレンス − 余白関連
margin − 指定した範囲の外側に余白を作る
padding − 指定した範囲の内側に余白を作る
marginは、指定した範囲の外側に、指定数分の余白を作り、paddingは逆に内側に余白を作ります。これらを利用し余白を整えることで、見やすくキレイなホームページを作ることができます。
なお、paddingについては、IEと、Firefox、Netscapeといったブラウザとでは反映のされかたが異なります（下記参照）。利用する際は十分確認してからアップしましょう。
float、paddingの値
- 余白として設けたいピクセル数を指定します。
- 数値を1つ指定した場合
[上下左右]に指定した数値の余白が作られます。 - 数値を2つ指定した場合
記述された順で[上下][左右]に余白が作られます。 - 数値を3つ指定した場合
記述された順で[上][左右][下]に余白が作られます。 - 数値を4つ指定した場合
記述された順で[上][右][下][左]に余白が作られます。
- 数値を1つ指定した場合
HTMLの記述例
<div style="background:#ffcccc; margin:10px;">marginを[上下左右]10px指定</div>
<div style="background:#ffcccc; padding:0 10px;">paddingを[上下]0px、[左右]10px指定</div>
<div style="background:#ffcccc; margin:10px;">marginを[上下左右]10px指定</div>
<div style="background:#ffcccc; padding:0 10px;">paddingを[上下]0px、[左右]10px指定</div>
ブラウザでの表示例
marginを[上下左右]10px指定
paddingを[上下]0px、[左右]10px指定
関連の指定
margin、paddingとも、上のみ、下のみ、左のみ、右のみの余白の指定が可能です。
margin、paddingとも、上のみ、下のみ、左のみ、右のみの余白の指定が可能です。
- margin-top、padding-top − 上のみに余白を指定。
- margin-bottom、padding-bottom − 下のみに余白を指定。
- margin-left、padding-left − 左のみに余白を指定。
- margin-right、padding-right − 右のみに余白を指定。
paddingのブラウザによる違い
paddingと、width、heightといった幅・高さを指定するコマンドを同時に使った場合、IEとFirefox、Netscapeとでは、以下のように反映のされ方が異なります。
例えば、「width:100px; padding:10px;」と指定した場合、IEでは横幅100pxの範囲内に余白が作られるのに対し、Firefox、Netscapeでは横幅が120pxに拡大され、その内側に余白が作られる、ということです。
これを計算に入れておかないと、表示崩れの原因となりますので注意しましょう。
paddingと、width、heightといった幅・高さを指定するコマンドを同時に使った場合、IEとFirefox、Netscapeとでは、以下のように反映のされ方が異なります。
- IEの場合
- 指定した幅・高さの内側に余白が作られる。
- Firefox、Netscapeの場合
- 指定した幅・高さが指定した余白の分だけ拡大され、その内側に余白が作られる。
例えば、「width:100px; padding:10px;」と指定した場合、IEでは横幅100pxの範囲内に余白が作られるのに対し、Firefox、Netscapeでは横幅が120pxに拡大され、その内側に余白が作られる、ということです。
これを計算に入れておかないと、表示崩れの原因となりますので注意しましょう。