CSS(スタイルシート)講座：各ブラウザの互換性を考慮したCSSを学びたい人にオススメ！
margin（マージン）とpadding（パディング）
デザインをする際、最も重要といっても過言ではない「余白」。CSSで余白を指定する際に使うプロパティであるmarginとpaddingを説明。 先にボックスの概念を知っておく必要があります。
margin（マージン）とは？
marginとはボックスの枠線の外側の余白を指します。marginには背景色を指定できません。また、マージンは前後または親子要素間で相殺されることがあります。 詳しくはマージンの相殺をご覧下さい。ではCSSの記述サンプルを紹介。
h1{ margin : 20px ; }
h2{ margin : 20px 0 ;}
h3{ margin : 10px 0px 20px 5px ; }
h4{
margin-top : 10px ;
margin-right : 5px ;
margin-bottom : 10px ;
margin-left : 5px ;
}
このようにmarginは様々な方法で指定できます。
まず、h1要素の解説から。この記述は上下左右の余白に20pxの値を指定しています。
続いてh2要素。上下に20px、左右に0px（値が0の場合は単位は必要なし）を指定しています。
h3要素には上下左右それぞれ10、0、20、5pxを指定しています。
また、h4要素のように個別にmarginを指定することも可能です。
また、左右マージンにautoとすることで要素をセンタリングさせることが可能です（行揃えとは異なります）。
詳しくは要素をセンタリングさせるには？をご覧下さい。
padding（パディング）とは？
paddingとはボックスの枠線の内側の余白を指します。marginと違い、paddingには背景色を指定できます。 また、paddingは前後または親子要素間で相殺されないので、慣れないうちはmarginよりpaddingをメインに使いレイアウトしたほうが良いかもしれません。
しかし、paddingとwidthを同時に指定するとIE6互換モードとIE5は他のブラウザと表示が異なるというバグがあるので注意が必要です。
CSSの記述方法に関してはmarginとほとんど同じなので割愛させていただきます。
インライン要素にmarginやpaddingを指定した場合
非置換インライン要素（a、spanなどテキスト主体の要素）の場合、左右margin・paddingはブロック要素と同様の効果が得られるが、 上下は適用されない（一応ボックスは生成され、背景色なども指定可能だが、指定した分のスペースは確保されず、上下の要素と重なってしまう）。
置換インライン要素(imgなど幅を持つ要素)の場合は、ブロック要素と同じく上下左右margin・paddingが適用される。
また、指定した分のスペースも確保されるので、隣接したインライン要素は上下または中央による。
任意の位置（高さ）にインライン要素を配置するにはvertical-align : top（bottom、middleなど）を使用する。
