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

boxクラスの幅に400pxを指定してあります。 文字に余裕がないので、paddingを追加しようとしたら… 余裕はできたけど、幅が400pxを超えてしまいました！ paddingは中の要素を広げるので、左と右に10pxずつ広がって、結果的に420pxとなってしまうのです。 さらにさらに、borderでも同じようなことが起こります。 外側にborderがつく形になり、boxクラスの幅は更に広がりました！ もうこの時点で440pxです。 幅400pxって言ってんだろ！！！！！

ＩＥは、昔、paddingをボックスの内側に取っていたのですが、paddingはボックスの外側と言うことになってしまい、仕様が変更されたみたいです。私もボックスの内側だと思っていたので、そう思い込んでＣＳＳを記述すると、幅が広がってしまい、Safariでは画面が左右に揺れるという現象が発生してしまいます。

今回、このサイトをモバイル対応にする作業をしていたのですが、どうしてこうなるんだろうと思い、調べたところ、このサイトが見つかりました。昔はいちいち計算していたらしいのですが、モバイルの時代になると、画面サイズがいろいろで、計算が難しいです。しかし、このサイトで言っているように、box-sizing:border-boxで簡単に解決します。これからはこの記述が必須ですね。

ちなみに、このサイトでは外側をcontainer、記事をarticleと言うIDのdivで囲んでありますが、両方にwidthとbox-sizing:border-boxを指定したところ、問題が解決しました。

関連ページ： box-sizing（ＨＴＭＬクイックリファレンス）

２０１９年１１月１４日１７：５０