【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を使う場合、これを知っておくと非常に便利なので覚えておきましょう。

Share on Facebook
Pocket