margin（マージン）とpadding（パディング） | CSS電光石火

• margin（マージン）とpadding（パディング）

•  

これまでは、準備段階ですので、実質的な内容には触れてきませんでした。
この小節では、実際の挙動を通して、CSSを学んでゆきます。
まず、基本かつ重要なmargin（マージン）とpadding（パディング）の挙動についてレクチャーしてゆきます。
まずはマージンからです。マージンは基本的に要素の内側から外側へと隙間を取る性質があります。図の左がmargin、右がpaddingです。

図のようにmarginは要素の外側へと押し広げるように拡大し、paddingは要素の内側へと拡大します。ただし、注意する点は、padding要素の概念は、外へと領域を一旦確保し、そこから内へと領域を狭めてゆく点です。
したがって、図のように、両者とも変わりの無い大きさを保つ事になります。
また、図として提示した要素ですが、この大きさは160px+20pxで180pxではなく。160px+20px+20px=200pxの幅となりますので、注意が必要です。上下左右にmarginやpaddingが確保されている場合は、両方の隙間を足して計算してください。

IE6はpaddingの解釈が独特で、widthと併用すると要素の大きさ+隙間、ではなく、要素の大きさの中にpadding領域を確保しようとします。したがって、これを回避するために『ブロック要素とインライン要素』に記載する指定、display:inline;と指定して、さらに『フロート本来の役割とハック』に存在するfloat:left;等を指定して乗り切るなどの工夫が必要です。
より簡単な手法としては、要素の中にさらに要素を配置して入れ子化し（ネストを深くし）、内部の要素から外の要素へと向かってmarginを指定する、という手法です。
この手法の場合はpaddingが使えない代わりに、一つ要素を増やして外側へと領域を確保しますから、IE6でも安心して使えます。難点は、無用なタグが増えてしまうことでしょうか。

<div>
 <div>マージンを外へ向かって指定</div>
</div>

上記がその具体的な入れ子の手法です。内側の要素が外の「外壁」に向かって拡張されます。