余白を入れる（マージン）
ホームページやブログなどのウェブサイトで HTML言語を使って ページを表示する際に、表示領域と本文の間に余白を入れることができます。
上下左右の余白を同一に指定する場合
<タグ名 style="margin:上下左右の余白">～</タグ名>
上下の余白、左右の余白をそれぞれ同一に指定する場合
<タグ名 style="margin:上下の余白 左右の余白">～</タグ名>
上下左右の余白をそれぞれ別々の値で指定する場合
<タグ名 style="margin:上の余白 右の余白 下の余白 左の余白">～</タグ名>
上の余白だけを指定する場合
<タグ名 style="margin-top:上の余白 右の余白 下の余白 左の余白">～</タグ名>
下の余白だけを指定する場合
<タグ名 style="margin-bottom:上の余白 右の余白 下の余白 左の余白">～</タグ名>
左の余白だけを指定する場合
<タグ名 style="margin-left:上の余白 右の余白 下の余白 左の余白">～</タグ名>
右の余白だけを指定する場合
<タグ名 style="margin-right:上の余白 右の余白 下の余白 左の余白">～</タグ名>
サンプルです。いま、表示領域はグレーの部分だと思ってください。余白を指定しないと、下記のようになります。
パリ、1870年代。オペラ座では"ファントム"（オペラ座の怪人）のしわざとされる謎の事件が続いていた。
リハーサル中での事故で、プリマドンナの代役を務めることになったクリスティーヌは、その初主演のステージで喝采を浴び、観客の中にいた幼馴染のラウルと再開する。
だが、その喜びも束の間、仮面をかぶった謎の怪人、ファントムに...
リハーサル中での事故で、プリマドンナの代役を務めることになったクリスティーヌは、その初主演のステージで喝采を浴び、観客の中にいた幼馴染のラウルと再開する。
だが、その喜びも束の間、仮面をかぶった謎の怪人、ファントムに...
ここで、上に 5ピクセル、右に 10ピクセル、下に 15ピクセル、左に 20ピクセルの余白を入れてみます。わかりやすいように、同時に背景色を黄色に指定します。
パリ、1870年代。オペラ座では"ファントム"（オペラ座の怪人）のしわざとされる謎の事件が続いていた。
リハーサル中での事故で、プリマドンナの代役を務めることになったクリスティーヌは、その初主演のステージで喝采を浴び、観客の中にいた幼馴染のラウルと再開する。
だが、その喜びも束の間、仮面をかぶった謎の怪人、ファントムに...
リハーサル中での事故で、プリマドンナの代役を務めることになったクリスティーヌは、その初主演のステージで喝采を浴び、観客の中にいた幼馴染のラウルと再開する。
だが、その喜びも束の間、仮面をかぶった謎の怪人、ファントムに...
このソースは次のようになります。
<div style="margin:5px 10px 15px 20px;background-color:yellow;">パリ、1870年代。オペラ座では"ファントム"（オペラ座の怪人）のしわざとされる謎の事件が続いていた。<br>リハーサル中での事故で、プリマドンナの代役を務めることになったクリスティーヌは、その初主演のステージで喝采を浴び、観客の中にいた幼馴染のラウルと再開する。<br>だが、その喜びも束の間、仮面をかぶった謎の怪人、ファントムに... </div>
このサンプルでは、上下左右の余白を一括して指定しています。
style="margin:上余白 右余白 下余白 左余白"
という順番で、スペースで区切って余白を指定します。余白の指定は、下記の絶対サイズまたは相対サイズにて指定することができます。
| 絶対サイズ | 意味 |
| in | インチ（ 1 in = 25.4 mm ） |
| cm | センチメートル |
| mm | ミリメートル |
| pt | ポイント（ 1 pt = 1/72 in） |
| pc | パイカ（ 1 pc = 12 pt ） |
| px※ | ピクセル（表示上の 1 ドット幅） |
| 相対サイズ | 意味 |
| em | 基準書体の文字の高さ |
| ex | 基準書体の文字 x の高さ |
| % | 基準書体のサイズに対する百分率 |
※正確にはデバイス依存の相対サイズ
上のみ、下のみ、など個別に余白を指定することもできます。
個別に余白を指定する場合は、
style="margin-top:上余白"
style="margin-bottom:下余白"
style="margin-left:左余白"
style="margin-right:右余白"
style="margin-bottom:下余白"
style="margin-left:左余白"
style="margin-right:右余白"
というような指定になります。画像と文字の間に余白を設けたサンプルはこちらをご覧ください。
たとえば段落文章の、上と左にだけ、10ピクセルづつ余白を入れたい場合は、
<div style="margin-top:10px;margin-left:10px;">段落文章</div>
として、上の余白指示と左の余白指示をセミコロン『；』で区切って併記してもいいですし、
<div style="margin:10px 0 0 10px;">段落文章</div>
のように一括指定して、必要な部分だけ数値を記述する方法もあります。だたしこの場合はスタイルシートなど他の指定で右余白と下余白の指定がしてあっても、ゼロにしてしまいます。