余白を入れる（マージン）

ホームページやブログなどのウェブサイトで HTML言語を使って ページを表示する際に、表示領域と本文の間に余白を入れることができます。タグで括られた領域に背景色や枠線を設定した際に、枠と文章がくっついてしまって見づらい場合などに 便利です。

上下左右の余白を同一に指定する場合
<タグ名 style="margin:上下左右の余白">～</タグ名>
上下の余白、左右の余白をそれぞれ同一に指定する場合
<タグ名 style="margin:上下の余白 左右の余白">～</タグ名>
上下左右の余白をそれぞれ別々の値で指定する場合
<タグ名 style="margin:上余白 右余白 下余白 左余白">～</タグ名>
上の余白だけを指定する場合
<タグ名 style="margin-top:上余白">～</タグ名>
下の余白だけを指定する場合
<タグ名 style="margin-bottom:下余白">～</タグ名>
左の余白だけを指定する場合
<タグ名 style="margin-left:左余白">～</タグ名>
右の余白だけを指定する場合
<タグ名 style="margin-right:右余白">～</タグ名>
  1. タグ名：P、DIVタグなどが一般的ですが、ほとんどのインラインタグおよびブロックタグが使用できます。
  2. 各余白：ピクセル指定が一般的ですが、下記の絶対サイズまたは相対サイズから指定できます。
    絶対サイズ意味
    in インチ（ 1 in = 25.4 mm ）
    cm センチメートル
    mm ミリメートル
    pt ポイント（ 1 pt = 1/72 in）
    pc パイカ（ 1 pc = 12 pt ）
    px※ ピクセル（表示上の 1 ドット幅）
    相対サイズ意味
    em 基準書体の文字の高さ
    ex 基準書体の文字 x の高さ
    % 基準書体のサイズに対する百分率
    ※正確にはデバイス依存の相対サイズ

サンプルです。いま、表示領域はグレーの部分だと思ってください。余白を指定しないと、下記のようになります。グレーの領域と、文字の範囲がぴったりしすぎて すこし見映えがわるいかもしれません。

パリ、1870年代。オペラ座では"ファントム"（オペラ座の怪人）のしわざとされる謎の事件が続いていた。
リハーサル中での事故で、プリマドンナの代役を務めることになったクリスティーヌは、その初主演のステージで喝采を浴び、観客の中にいた幼馴染のラウルと再開する。
だが、その喜びも束の間、仮面をかぶった謎の怪人、ファントムに...

ここで、上に 5 ピクセル、右に 10 ピクセル、下に 15 ピクセル、左に 20 ピクセルの余白を入れてみます。わかりやすいように、同時に背景色を黄色に指定します。

パリ、1870年代。オペラ座では"ファントム"（オペラ座の怪人）のしわざとされる謎の事件が続いていた。
リハーサル中での事故で、プリマドンナの代役を務めることになったクリスティーヌは、その初主演のステージで喝采を浴び、観客の中にいた幼馴染のラウルと再開する。
だが、その喜びも束の間、仮面をかぶった謎の怪人、ファントムに...

このソースは次のようになります。

<div style="margin:5px 10px 15px 20px;background-color:yellow;">
パリ、1870年代。オペラ座では"ファントム"（オペラ座の怪人）のしわざとされる謎の事件が続いていた。<br>リハーサル中での事故で、プリマドンナの代役を務めることになったクリスティーヌは、その初主演のステージで喝采を浴び、観客の中にいた幼馴染のラウルと再開する。<br>だが、その喜びも束の間、仮面をかぶった謎の怪人、ファントムに...
</div>