hajipion.com

UI/UX designer blog & creative portfolio

paddingやborderが横幅(width)を広げてしまう事件を解決する方法

border-box

そこの幅広げたいなんて誰も言ってねえよ!!

たとえばこういう状況ですね。

幅を指定したbox
400pxにぎっしり

boxクラスの幅に400pxを指定してあります。

文字に余裕がないので、paddingを追加しようとしたら…

paddingを追加
余裕はできたけど

余裕はできたけど、幅が400pxを超えてしまいました!

paddingは中の要素を広げるので、左と右に10pxずつ広がって、結果的に420pxとなってしまうのです。

さらにさらに、borderでも同じようなことが起こります。

borderを追加
borderも幅を広げる

外側にborderがつく形になり、boxクラスの幅は更に広がりました!

もうこの時点で440pxです。

幅400pxって言ってんだろ!!!!!

解決策

これを解決するため、今まではもとの幅を360pxに修正するしかなかったのですが、CSS3で追加された「box-sizing」プロパティを使えば、ささっと事件解決です!

box-sizingプロパティにborder-boxを追加

値は「border-box」を指定します。

すると……

おさまった!
(おさまったー!)

デフォルトの値

「box-sizing」の値は「content-box」がデフォルトとなっています。

なのであえてそう指定してみると……

content-boxがデフォルト
なので戻ります

もとのようになりましたね。

いちいち「border-box」と指定するのは面倒ですが、状況に応じて使い分けることが大切です。