【CSS】border を内側に配置してカラム落ちしないようにする

ウェブデザイン初心者の頃は、スマホサイトなんて無かったので PX（ピクセル）でのサイト作成全盛期の CSS 2 時代。

横並びボックスの border や padding の幅を計算に入れるのを忘れて、しょっちゅうカラム落ちしてイラついていたのを覚えています（笑）

ときは流れ、CSS 3 時代に突入した今、border や padding 幅の計算は要らなくなりました。「box-sizing」というプロパティを使えば、border も padding も含めてボックスの幅という風に設定できるようになったからです。

今回は「box-sizing を使えば、border や padding を内側配置にするのでカラム落ちしないんです」のメモです。

box-sizing の特徴

box-sizing を使わなかった場合（デフォルト）

このように border や padding はボックスの外側へ追加幅扱いとして配置されるので、border（padding） 分の幅が増えてしまいますからカラム落ちしてしまいます。

box-sizing を使った場合

しかし、box-sizing を適用した場合は、このように border （padding）を含んだうえでのボックス幅という扱いになり、カラム落ちしなくなります。

box-sizing の使い方

ボックス要素やインライン要素に対して「box-sizing: border-box;」と記述すれば OK。

使用例：

など。border や padding とセットで用います。

すべての子要素に一括で効かせようとして、親要素に box-sizing を記述しても、子要素には適用されませんのでご注意です。横着はできません。

以上 box-sizing の使い方でした。