marginとpaddingの小話

CSSを書き始めたばかりのときって、
margin,paddingの指定についてつまづきがちなことが多い気がするので
自分の備忘録がてら書いて行こうと思います。
IE6は葬式が行われたので書いてないですあしからず。

margin,paddingって？

margin : 領域外の余白
padding : 領域内の余白

文章より画像で見た方がわかりやすいですよね！

簡単に言えば
marginは背景とまた別で余白が欲しいとき
paddingは背景付きで余白が欲しいとき

という風に考えたら覚えやすいかなって思ってます！

指定方法

値を2つ指定するときは
margin: 上下左右;　　　(paddingも同じ)
値を3つ指定するときは
margin: 上　左右　下;
値を4つ指定するときは
margin: 上右下左;

値を４つ指定するときは"時計回りに指定"って覚えると覚えやすいです！
自分はいつも忘れたら時計周りに指を動かしながら考えてます（笑）

上に書いたのは値を複数指定するときの場合ですが、
margin-top,margin-bottom,margin-light,margin-right
のように個別に指定することも可能です！

marginの相殺について

例えばボックスが２つあったとき、
左右マージンはされないけど垂直方向（上下）のマージンは
相殺といってマージンの値が大きい方ののマージンを採用して表示されます。

divが入れ子になっているときも同じで
マージン値が大きい方のマージンが採用されるので注意が必要です！

ブロック要素を中央寄せしたいとき

#div{
width: 500px;/*幅の指定*/
margin: 0 auto;/*中央揃えにする*/
}

divなどのブロック要素を中央揃えにしたいときにtext-alignを利用するのは間違いです！
（text-alignはインライン要素に指定するCSSです! IE6は上の記述だと中央揃えにならないけどX( ）
なのでブロック要素を中央に寄せたいときは、
幅を指定して、マージンの左右の指定をautoにすると中央揃えにできます！