サイト制作
CSSで幅を指定したのにはみ出す box-sizingで余白と枠線の計算を整理
2026-11-07
この記事には広告・アフィリエイトリンクが含まれます。
widthに含まれる範囲はbox-sizingで変わります。content-boxとborder-boxを、小さな数値例で確認します。
widthの外に足されるものがある
幅を200ピクセルにした箱へ左右20ピクセルのpaddingと、左右2ピクセルのborderを付けると、表示される幅はいくつでしょう。content-boxでは内容部分が200ピクセルなので、外側の幅は244ピクセルになります。指定した数値が、枠線まで含む幅とは限らないのです。
この計算の扱いを指定するのがbox-sizingです。横並びの部品が思ったより大きいときは、widthだけを小さくする前に、どの部分の寸法を指定しているか確認すると原因を整理できます。
border-boxは枠線までを含める
同じ例でborder-boxを使うと、通常はpaddingとborderを含んだ幅が200ピクセルになり、内容を置く部分は156ピクセルになります。説明用の単純な例ですが、余白や枠線を指定幅の内側へ収める、と考えるとわかりやすいですね。
ただし、marginはborder-boxでも指定幅に含まれません。部品同士の外側の余白まで自動で計算に入ると思うと、横並びでまたはみ出す原因になります。
計算と実際の中身を両方見る
border-boxにすれば、あらゆるはみ出しが解消するわけではありません。内容部分より長い文字列や、大きさの決まった画像などは、別に確認する必要があります。
開発者ツールで内容、padding、border、marginを見分け、まず箱の寸法が予定どおりかを調べましょう。そのうえで中身が収まるかを見れば、幅の計算と内容の問題を混同しにくくなります。
