marginプロパティはボックスの上下左右のマージン領域（他の要素と見分けをつけるための最も外側にある余白）をまとめて指定します。マージン領域とは、たとえば、視覚環境の UA のデフォルトスタイルシートにおいて、blockquote要素, form要素, h1-h6要素, p要素などのブロック要素の上下（blockquote要素の場合は上下左右）に設定されている透明の（親要素の背景が透ける）余白部分のことです。これらの要素にデフォルトで設けられているマージンをなくしたり、さらに広げたりするのも、marginプロパティによって操作できます。
0"）を参照marginプロパティに指定できる値は、それぞれ以下の意味を示します。
em", "px" などの単位識別子を伴う数値で指定%）による割合で指定（上・下辺のマージンも横幅を参照）autoauto と各プロパティの兼ね合いを参照）これらの値を半角スペースで区切って1つ以上4つ以下まで指定することができます。値を1つだけ記述した場合は、その指定が上下左右の四辺全部に反映され、2つの場合は「上下」「左右」の順に反映され、3つで「上」「左右」「下」の順に反映され、4つで「上」「右」「下」「左」の時計回りの順で四辺個別に反映されます。
なお、パーセンテージ値は包含ブロック（もっとも近い祖先の要素にあたるブロック要素の内容領域）の横幅を参照します。左辺（margin-left）・右辺（margin-right）のマージンだけでなく、上辺（margin-top）・下辺（margin-bottom）のマージンにおいても、参照する基準値は高さの方ではなく横幅の方であることに注意してください。
"auto" を指定した場合、要素の内容領域の横幅を指定する widthプロパティ、要素の位置を指定する topプロパティ, bottomプロパティ, leftプロパティ, rightプロパティとの兼ね合いでマージンが算出されることになります。
この内容の解釈はとても複雑なので、ここではあえて簡単な説明だけに止めておきます。まず、適用対象がインライン要素や floatプロパティによる左右どちらかへのフロート（浮動化）を指定された要素である場合、"auto" の指定は常に "0" の値を算出します。そして、最低限抑えておきたい点として、leftプロパティと rightプロパティの値が "auto" で、widthプロパティの値が "auto" 以外で横幅が指定されたブロック要素を対象とする場合は、次のようなマージンが算出されることになります。
auto" の値が指定されている（"margin-left : auto ; margin-right : auto ;" など）場合、widthプロパティで横幅の指定されたブロック要素のボックスを中央揃え（センタリング）にするような左右に等分のマージンを算出します。0" で、もう一方に "auto" の値が指定されている（"margin-left : auto ; margin-right : 0 ;"、または "margin-left : 0 ; margin-right : auto ;" など）場合、widthプロパティで横幅の指定されたブロック要素のボックスを左揃え（右辺が "auto" の場合）・右揃え（左辺が "auto" の場合）にするようなマージンを算出します。上記パターン以外で "auto" が算出するマージンを活用することはないので、詳細は CSS2.1の視覚整形モデル詳細を参照ください。
マージンの相殺の身近な例を挙げます。段落を作成するための p要素は、視覚環境の UA のデフォルトスタイルシートでは上下に1行分のマージンが設けられているはずです。この上下に1行分のマージンをもつ p要素がソース内にて連続した場合に、上にある p要素が下辺に1行分のマージンを作り、続く下にある p要素も上辺に1行分のマージンを作るはずですが、これらの p要素が隣り合っている部分には計2行分のマージンができるのではなく、なぜか1行分のマージンしかできません。これがマージンの相殺（collapsing margins）です。
floatプロパティによる左右どちらかへのフロート（浮動化）、及び positionプロパティによる絶対配置（"absolute"、または "fixed"）が指定されていないブロック要素が隣り合った場合に限り、垂直（上下）方向のマージンは相殺されることになります（CSS2 の仕様では、水平方向のマージンの相殺は行われません）。垂直方向のマージンの相殺は、指定された値により、最終的なマージンの算出方法が次の3パターンに別れます。
<p style="margin : 5px 5px 30px 5px ;">上の段落</p> <p style="margin : -20px 5px 5px 5px ;">下の段落</p>
たとえば、このサンプルであれば、上の段落は下辺に "30px" のマージンが指定されており、下の段落は上辺に "-20px" のマージンが指定されているので、2番目のパターンの正の値と負の値のマージンが隣り合った場合にあてはまり、最終的なマージンの算出は、両方の値を足しあわせた "30px + (-20px) = 10px" となります。
margin-topmargin-bottommargin-leftmargin-right上・下・左・右のマージン（余白）を個別に指定する場合は、これら4つのプロパティが用意されています。marginプロパティと違うのは値を1つしか指定できないことだけで、その他は同じなので、これらの個別プロパティについての解説は割愛します。
auto" の値が算出するマージンは常に "0" になる）auto" の値が算出するマージンは常に "0" になる）margin-topプロパティ, margin-bottomプロパティ, margin-leftプロパティ, margin-rightプロパティも同上。
<div style="text-align : center ; "> <table style="margin-left : auto ; margin-right : auto ; text-align : left ;" border="1"><tr><td> 横幅の指定されたブロック要素のセンタリング </td></tr></table></div> <div style="text-align : right ; "> <table style="margin-left : auto ; margin-right : 0 ; text-align : left ;" border="1"><tr><td> 横幅の指定されたブロック要素の右寄せ </td></tr></table></div>
サンプルのように marginプロパティは、横幅の指定されたブロック要素の左右中央揃えに応用することができます。ただし、Windows版Internet Explorer 6 が1行目に XML宣言があると自動的にレンダリングモードを後方互換モードに切り替えてしまうバグがあることとの兼ね合いもあって、現状の XHTML文書において横幅の指定されたブロック要素の左右中央揃えを行うのには現実的に text-alignプロパティの指定を伴う必要があります。詳しくは CSS によるブロック要素の左右中央揃えを参照ください。
http://w3g.jp/css/box/margin直近の制作実績等：大阪人間科学大学 New! / 大阪薫英女子短期大学 New! / セキスイハイム みんなのお国じまん New!