Since: 27th/May/2002; Last modified: 24th/Dec./2006
本項では、要素の周囲の余白であるマージンを指定します。要素が表示可能な範囲は、周囲の要素との関係で決定します。当該要素に対するスタイルの指定では、表示可能な矩形範囲に対して、要素の開始線をどれだけずらすかを指定します。
margin によってずらした開始線の内側が要素の表示可能領域になり、その外側の領域は親要素の領域であり、背景は親要素のものが使われます。
|
| 図：margin があらわす範囲 |
上下左右margin プロパティのパラメタが一つの場合は、四方のマージンが全て等しく指定された値なります。
次の例は、段落要素の上下左右の四方のマージンを１em ずつとる指定です。
p { margin: 1em }
上下 左右margin プロパティのパラメタが二つの場合は、第一のパラメタが上下のマージン、第二のマージンが左右のマージンを指定します。
次の例は、段落要素の上下のマージンを１em ずつ、左右のマージンを表示可能幅の５％ずつとる指定です。
p { margin: 1em 5% }
上 左右 下margin プロパティのパラメタが三つの場合は、第一のパラメタが上のマージン、第二のマージンが左右のマージン、第三のパラメタが下のマージンを指定します。たとえば h1, h2, h3 などの要素は、上の要素からは離して、下の要素とは近づけた方が直感的です。
次の例は、 h2 要素の上のマージンを２em、左右のマージンを表示可能幅の５％ずつ、下のマージンを １em とる指定です。
p { margin: 2em 5% 1em }
上 右 下 左margin プロパティのパラメタが四つの場合は、上から時計回りに順番に、右、下、左のマージンを個別に指定します。
次の例は、 ul 要素の上マージンを１em、右マージンを０、下マージンを２em、左マージンを１０％とる指定です。
ul { margin: 1em 0 2em 10% }
<length> | 定義は別項参照 |
<percentage> | % 単位。当該要素の表示可能領域の幅を１００％とする比率。 |
auto | ブラウザ依存 |
本節でも、前項のサンプルを引き続き利用しましょう。
HTML 文書は三つ存在しますが、さし当たって、 index.html のソースは次のようになっています：
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet href="./common.css" type="text/css" media="screen" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<link rel="stylesheet" href="./common.css" type="text/css" media="screen" />
<title>源氏物語 - 紫式部</title>
<link rel="start" href="./index.html" />
<link rel="next" href="./genji01_kiritsubo.html" />
</head>
<body>
<h1>源氏物語 - 紫式部</h1>
<p class="navbar"><a href="./genji01_kiritsubo.html">進む</a></p>
<div class="section">
<p><cite>源氏物語</cite>は日本の平安時代中期に成立した長編物語。成立が古いため、
版がたくさんあり、現在では便宜的に、青表紙本系、河内本系、その他と考えることが多
い。</p>
<p>王朝文学というカテゴリがあり、古くから注釈書／研究が多い。本居宣長、池田亀鑑
、秋山虔、池田弥三郎、河添房江、藤井貞和らの注釈書／梗概書が良く読まれている。</p>
<p>現代語訳、翻案も数多く、一つのジャンルをなしている。翻訳では、与謝野晶子、谷
崎潤一郎、円地文子、瀬戸内寂聴らのものがよく知られている。また、翻案では、江戸時
代後期の『偐紫田舎源氏』などのほか、寂聴の『女人源氏』、橋本治の『窯変源氏』が新
しい。まんがでは大和和紀の『あさきゆめみし』が決定版だ。これは田辺源氏を原典とし
ているらしい。</p>
<ul>
<li><a href="./genji01_kiritsubo.html">第一帖 桐壺冒頭</a></li>
<li><a href="./genji02_hahakigi.html">第二帖 帚木冒頭</a></li>
</ul>
<p><cite>源氏物語</cite>の原文は、
<a href="http://www.sainet.or.jp/%7Eeshibuya/">渋谷栄一研究所</a>に拠った。</p>
</div> <!-- END section -->
<p class="navbar"><a href="./genji01_kiritsubo.html">進む</a></p>
<address>
Copyright (C) 2006
<a href="mailto:nextindex@gmail.com">SUGAI, Manabu</a>.
Some rights reserved.
</address>
</body>
</html>
これらの HTML 文書から参照している外部スタイルシート common.css は前項の最後の段階では次のようになっています：
@charset "utf-8";
* { font-style: normal;
font-weight: normal;
font-family: 'Meiryo', sans-serif }
html { background: url(./rindou5.gif) navy;
color: #ccf }
h1 { font-style: italic;
font-size: 3em;
font-family: cursive;
text-align: center;
text-decoration: overline underline }
div.section { background : #ccf;
color: navy }
p { line-height: 1.5;
font-family: serif;
text-indent: 1em;
letter-spacing: 0.2em }
p:first-child { font-weight: bold;
text-indent: 0 }
p:first-child:first-letter { color: red;
font-size: 2em }
address { font-style: normal;
font-variant: small-caps;
font-weight: bold;
font-size: 0.9em;
line-height: 1;
font-family: 'Andale Mono Bold','Osaka等幅','Consolas',monospace;
text-align: right }
/* リンクアンカー擬似要素 */
a:link,a:visited { text-decoration: underline }
a:link { color: #ccf }
a:visited { color: #fcf }
a:hover { color: #ccf; background: navy;
text-decoration: none }
.section a:link { color: navy }
.section a:visited { color: maroon }
.section a:hover { color: #ccf }
外部スタイルシートで body 要素の背景画像に指定されているのは次の画像です：
 |
図：rindou5.gif |
index.html をブラウザで開いて表示を確認してください。
margin の指定h1 要素のマージンを、上下左右共に１emに指定します。p 要素のマージンは、上下１em、左右５％に指定します。また、 address のマージンを、上２em、左右５％、下１em に指定します。 common.css を次のように編集／保存してください。
@charset "utf-8";
/* ボックスサイズ */
h1 { margin: 1em }
.section { margin: 1em 5% }
address { margin: 2em 5% 1em }
/* 色とフォント */
* { font-style: normal;
font-weight: normal;
font-family: 'Meiryo', sans-serif }
html { background: url(./rindou5.gif) navy;
color: #ccf }
h1 { font-style: italic;
font-size: 3em;
font-family: cursive;
text-align: center;
text-decoration: overline underline }
div.section { background : #ccf;
color: navy }
p { line-height: 1.5;
font-family: serif;
text-indent: 1em;
letter-spacing: 0.2em }
p:first-child { font-weight: bold;
text-indent: 0 }
p:first-child:first-letter { color: red;
font-size: 2em }
address { font-style: normal;
font-variant: small-caps;
font-weight: bold;
font-size: 0.9em;
line-height: 1;
font-family: 'Andale Mono Bold','Osaka等幅','Consolas',monospace;
text-align: right }
/* リンクアンカー擬似要素 */
a:link,a:visited { text-decoration: underline }
a:link { color: #ccf }
a:visited { color: #fcf }
a:hover { color: #ccf; background: navy;
text-decoration: none }
.section a:link { color: navy }
.section a:visited { color: maroon }
.section a:hover { color: #ccf }
index.html をブラウザで開いて、段落の表示位置が変化している事を確認してください。
上下に隣接するマージンは相殺が起こり、大きい方のマージンが採用されます。したがって、段落同士の間は１em だけマージンが取られ、段落と address の間は２em だけ取られます。また、 h1 要素と p 要素の間のマージンは、何れからも１em が指定されていますが、当該要素のフォントの大きさを１とする単位である "em" 単位の定義上、 h1 要素の周囲のマージンの方が大きく、そちらが採用されています。
また、マージン領域は親要素である body 要素の背景が使われていることを確認してください。
| 図： margin 指定した表示例 |