マージンについて考える 1〜margin-auto

マージンの挙動をしっかり理解できるとレイアウトをコーディングすることが楽になります。
ここではmargin:autoについて考えてみたいと思います。
margin:autoといえば、ブロック要素の中央揃えね。となりますが、少し掘り下げてみましょう。
通常フローのブロックレベル要素で各マージンの 値を「auto」にした場合は以下のように算出されます。

1. 上下のマージン（「margin-top」と「margin-bottom」）の値が「auto」なら、上下のマージンは０になります。
   サンプル
2. 「margin-left」、「margin-right」、「width」のどれか一つが 「auto」なら，包含ブロックの横幅値から算出します。
   包含ブロックの横幅 = (margin-left)+ (border-left-width) + (padding-left) + (width) + (padding-right) + (border-right-width) + (margin-right)＊margin-left:autoを指定した場合には下の計算になる。

   「margin-right」=(包含ブロックの横幅)-{ (border-left-width) + (padding-left) + (width) + (padding-right) + (border-right-width) + (margin-right)}

   margin:autoの実例

   サンプル
   cssソース

   body{
   	width:600px;
   }
   div {
   	height: 100px;
   	width: 100px;
   	border: 1px solid #00F;
   }
   
   #box1 {
   	background: #6FF;
   	margin-left: auto;
   	margin-right:0px;
   }
   #box2 {
   	background: #C00;
   	margin-right: auto;
   	margin-left:0px;
   }
   #box3 {
   	background: #FF0;
   	margin: auto;
   }
   

   htmlソース

   <div id="box1">
   margin-left:autoを設定
   </div>
   <div id="box2">
   margin-right:autoを設定
   </div>
   <div id="box3">
   margin:autoを設定
   </div>
   

3. 「width」 の値が 「auto」 なら，「margin-left」と「margin-right」の 「auto」 の値が 0 になる。
   サンプル
4. 「margin-left」 および 「margin-right」 の指定値が両方とも ‘auto’ なら，両者の算出値は等しくなる。この方法がブロック要素の中央揃えになります。
5. 「margin-left」、「margin-right」、「width」 の指定値すべてが ‘auto’ 以外の値を採るとき，それらのプロパティのうち一つは指定値とは異る算出値を採る必要が生じます。包含ブロックの書式が左横書きなら 「margin-right」 が無視され，前項に示した等式を満たすように算出値が与えられます。

サンプル