【CSS】margin: 0px autoが効かない原因

Author:

margin: 0px autoを設定しているのにセンタリングされてくれない。
うーむ?

答えは単純な話、width指定が無かったから。
widthが500pxだったら全体の幅から500pxマイナスして自動的に左右均等にしてくれるけど、
下の要素もすべてみて自動調整なんてことはやってくれないっぽいです。

ってことで、
margin: 0px auto;
width: 1000px
のセットは必須ですね。

【CSS】box-sizingを使えばpaddingやmarginのサイズを気にしなくてすむ

Author:

cssを扱ったことがある人ならだいたいpaddingやmarginでサイズがおかしくなった経験があるでしょう。

例えば
width: 300px;
padding: 8px;
margin: 10px;
と書いた時、
実際のwidthは300+8*2+10*2で336pxとなってしまいます。

margin-padding
(画像はmarginが入っていませんが)

このせいで、floatなどを使うとサイズが合わなくてブロックが下に表示されてしまいます。
それを防ぐためには、box-sizingというstyleを適用してあげましょう。

box-sizing: border-box;

こんなふうに書いてあげるだけで、margin、paddingは内側に入るようになります。

margin-padding2

当然中に入る文字列は少し短くなりますが。

floatを使う場合、これを知っておくと非常に便利なので覚えておきましょう。