CSS： marginの正しい理解

ボックスモデル

marginを説明する上で、まずはボックスモデルを知る必要があります。
CSSを適用する場合、以下の図を理解する必要があります。

CSSでmarginを指定すると、上記のボックスモデルのmarginと書かれた部分に、数値が適用されます。

marginの種類

marginにはプロパティが用意されており、省略も可能です。

個別指定

• margin-top
• margin-bottom
• margin-left
• margin-right

marginの省略

• margin:0; (上下左右)
• margin: 0 0; (上下)　(左右)
• margin:0 0 0; (上)　(左右)　(下)
• margin:0 0 0 0; (上)　(右)　(下)　(左)

論理プロパティ

• margin-start
• margin-end
• margin-before
• margin-after

margin-topなどは見慣れてるけど、margin-startは初めて見るという方もいると思います。
margin-(start|end|before|after) は回転方式のブロックに対して、提案されたものです。

margin-topは、画面から見た物理的な方向に対し、
margin-startは、論理的な方向になります。

横書きにmargin-startが指定されている場合は、margin-leftが適用されます。
縦書きになった場合は、margin-startは、margin-topが適用されることになります。

このプロパティを使用することにより、同一のCSSで縦書き、横書きの切り替えがスムーズになる可能性を持っています。(ただしIE8などは使用不可。)

margin と auto と width の関係

marginに対して、autoを設定した場合は数値は0になります。
しかし、横幅(width)を指定した状態で、marginの左右のどちらかにautoを指定すると、指定した方に数値を算出します。

ブラウザの幅が600pxの場合

div {
  with:100px;
  margin-left:auto;
}

上記の例なら、ブラウザの幅が600pxなので、margin-leftは自動で500pxになります。

Negative Margin(ネガティブ・マージン)

marginの数値をマイナス指定することによって、要素を移動や、要素を配置します。
パターンから外れたレイアウトを組む際に、お世話になることが多いです。

例えば、以下の図のようなレイアウトにしたい場合

<style>
/* css reset */
ul {
  margin:0;
  padding:0;
  list-style:none;
}

/* demo */
#list {
  margin:0 auto;
  border:1px solid #000;
  padding:8px 8px 0;
  width:488px;
}
ul {
  margin-right:-8px; /* ここでネガティブマージンを指定 */
  /* width:496px; 追記:IE6,7を無視するならいらない */
  overflow:hidden;
}
li {
  float:left;
  margin:0 8px 8px 0;
  width:116px;
  height:116px;
  background-color:#bbb;
}
</style>

<div id="list">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

上記ソースのデモ

ネガティブマージンを使用すると、レイアウトの幅が広がります。
ただし上記ソースの1つ1つの意味が、理解できていないうちは、多用すべきではありません。

margin と padding

marginでも、paddingでも、空間をあけることが可能です。

<style type="text/css">
.margin {
  margin-bottom:10px;
}
.padding {
  padding-bottom:10px;
}
</style>

<div class="margin">aa</div>
<div class="margin">bb</div>

<div class="padding">aa</div>
<div class="padding">bb</div>

margin, padding共に、空間をあけることができます。
見た目は同じに見えますが、挙動は全く違います。

paddingは、背景色や、枠線にも影響して余白をあけることができますが、
marginは要素ごとで間隔をあけることができます。

marginの相殺

paddingにはない機能として、marginの相殺があります。
相殺はmargin同士が重なった場合に起こり、「marginが使いづらい」という印象を与える最大の理由かもしれません。
特定のケースだと、相殺が起きないなどトリッキーな動きをします。
トリッキーすぎて、初学者に「バグじゃないの？」と思われることも、しばしばです。

しかしmarginの相殺を理解することで、marginの単一方向の指定や、paddingを使用するよりも、HTML, CSSをクリーンに書ける場合も多くあります。

<style type="text/css">
.margin {
  margin:10px 0; /* 上下に1emを指定 */
}
.padding {
  padding:10px 0; /* 上下に1emを指定 */
}
</style>

<div class="margin">aa</div>
<div class="margin">bb</div>

<div class="padding">aa</div>
<div class="padding">bb</div>

paddingであれば、divの間は、10px+10px=20px　となります。
marginは相殺によってdivの間が、10pxしかあきません。

相殺を理解するには、要素を人に例えるとわかりやすいかもしれません。

• widthは、骨格
• heightは、身長
• borderは、皮膚
• paddingは、脂肪
• marginは、心の距離

脂肪(padding)だと、物理的な距離となります。

これが心の距離(margin)の場合は、Aさんの心の距離が1。
ただしBさんのAさんのことを、それほど想っておらず、心の距離は3だとします。
Aさんは心が縮まっていると思っていても、AさんとBさんの心の距離を客観的に見ると、実際の心の距離は3となります。

<style type="text/css">
  .a {
    margin:20px 0;
  }
  .b {
    margin:30px 0;
  }
</style>

<div class="a">a</div>
<div class="b">b</div>

<style type="text/css">
  .parent{
    margin:10px 0;
  }
  .child {
    margin:30px 0;
  }
</style>

<div class="parent">
  <div class="child">child</div>
</div>

<style type="text/css">
  .parent {
    margin:30px 0;
  }
  .child {
    margin:10px 0 40px;
  }
</style>

<div class="parent">
  <div class="child">demo</div>
</div>

相殺が起こらないケース

親の要素に特定のCSSを適用することで、子の相殺が発生しません。

• border (marginが指定されている方向)
• padding (marginが指定されている方向)
• overflow:hidden, scroll (auto, visibleは適用されない)
• position:absolute, fixed (relative, staticは適用されない)

さらに上記以外にも、floatによって相殺が発生しない場合があります。

margin と float の関係

marginとfloatは、密接な関係にあります。
floatを使いこなすためにも、marginの理解は必須です。

<style>
div {
  margin:10px auto;
  width:300px;
  float:left;
}

.child {
  margin:10px;
  width:100px;
  height:100px;
  float:left;
}

</style>

<div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

<style>
img {
  float:left;
  margin:0 10px;
}
.test {
  margin-top:96px;
}
</style>

<img src="dummy.jpg" alt="" width="80" height="80" />
<img src="dummy.jpg" alt="" width="80" height="80" />
<img src="dummy.jpg" alt="" width="80" height="80" />
<div class="test">floatとmarginの相殺</div>

<style>
img {
  float:left;
}
.right {
  float:right;
  width:80px;
  height:240px;
  margin-bottom:10px;
}
.clear {
  margin-top:3000px;
  clear:left;
}
.clear-right {
  margin-top:-1000px;
  clear:right;
}
</style>

<img src="dummy.jpg" alt="" width="80" height="80" />
<img src="dummy.jpg" alt="" width="80" height="80" />
<img src="dummy.jpg" alt="" width="80" height="80" />

<div class="right"></div>

<div class="clear">clear:left;</div>
<div class="clear-right">clear:right;</div>

相殺の利点

うんざりしてくるほど、ややこしいmarginですが、間隔を適切にあけたい場合。
相殺など利用することにより、クリーンなソースコードが書ける場合も多くあります。
レイアウトをmarginで書いたものと、paddingで書いたものを比較します。

完成するレイアウト

<style type="text/css">
dl {
  margin:3em 0;
}
dt {
  display:inline;
  float:left;
}
dd {
  margin:1em 0 3em 120px;
}
p {
  margin:1em 0;
}
</style>

<dl>
  <dt>margin デモ1</dt>
  <dd>ddタグの中に直接テキストを入れています。</dd>

  <dt>margin デモ2</dt>
  <dd>
    <p>ddタグの中にpタグを入れています。</p>
    <p>ddとpのmarginが重なるので、相殺が起きます。</p>
  </dd>

  <dt>margin デモ3</dt>
  <dd>
    <img src="dummy.jpg" alt="" width="480" height="32">
    <p>画像が入っても適度に間隔があきます。</p>
    <p>また下に入っても問題ありません。</p>
	<img src="dummy.jpg" alt="" width="480" height="32">
	<p>さら下に入っても問題ありません。</p>
  </dd>
</dl>

<style type="text/css">
 /* CSSリセット */
dl, dd, p {
  margin:0;
}

dl {
  padding:3em 0;
}
dt {
  display:inline;
  float:left;
}
dd {
  padding:0 0 3em 120px;
}
.pt {
  padding-top:1em;
}
.pb {
  padding-bottom:1em;
}
.last-child {
  padding-bottom:0;
}
</style>

<dl>
  <dt>margin デモ1</dt>
  <dd>ddタグの中に直接テキストを入れています。</dd>

  <dt>margin デモ2</dt>
  <dd>
    <p class="pb">ddタグの中にpタグを入れています。</p>
    <p>pタグ同士の間隔をあけるので、classを入れなければいけません。</p>
  </dd>

  <dt>margin デモ3</dt>
  <dd class="last-child">
    <img src="dummy.jpg" alt="" width="480" height="32">
    <p class="pt pb">画像が入ると、class祭りになります。</p>
    <p class="pb">新しくpタグを入れようと思うと、classを更に入れなければなりません。</p>
	<img src="dummy.jpg" alt="" width="480" height="232">
	<p class="pt">classがやたら増える。</p>
  </dd>
</dl>

marginの相殺を利用したものと、paddingを使ってレイアウトを組んだものの比較です。
paddingを使用すると、最後の要素は、padding-bottom:0; を指定したり、classを細かく割り振ったりします。
.mt10, .mt20などのクラスを用意している人は、paddingのような指定を行っていることが多いです。

それに対して、marginの相殺を利用すると、HTML, CSSともに、短く書くことができます。
さらに適切に間隔を保つことができるので、特にCSSを指定していないimg要素がイレギュラーに入ったとしても、ある程度は容易に対処することができます。

上記のサンプルは、相殺をうまく利用した例です。
デザインによっては、親にborderやpaddingなどを入ることにより、相殺が使えない場合もあります。
しかし、相殺を理解していることで、HTMLやCSSの書く効率が変わってきます。

ブラウザのデフォルトスタイルシート

ブラウザのデフォルトスタイルシートは、marginと関連があります。
h1やpなどの要素には、ブラウザで、あらかじめCSSがついています。

h1 {
  margin:0.67em 0;
  font-size:2em
}
p {
  margin:1em 0;
}

相殺を計算されたうえで、上下にmarginの指定されています。
このスタイルシートによって、"文章"を適切にマークアップすれば、適度な間隔を保つようになっています。

デフォルトスタイルシートを生かすように構築する場合は、相殺の考え方が大切になります。