【ＣＳＳ】padding，border分はみ出し対策にbox-sizing: border-box(ただしマージンまで計算しない)

以前『レスポンシブで、スマホからアクセスしたときに横にずれる・ディスプレイ領域の外にはみ出る現象を直したい』といった記事を書いたんですけど、今回はそれの対策になりそうなＣＳＳプロパティを紹介します。内容はpadding，border分をボックスサイズと合わせて計算してくれるというもの。さっそく内容を確認していきましょう。

box-sizing:border-box; とは？

box-sizingは要素の全体の幅と高さに関わるプロパティで、現在使われている値は主に２つ（border-box，content-box）です。

content-boxは『要素に境界やパディングがある場合、画面に表示される矩形の大きさは width および height にこれらを加えたもの』、border-box『幅 = コンテンツの幅、高さ = コンテンツの高さとして計算し、境界やパディングは計算に含まれない』という扱いになります。

このほか、グローバル値として『inherit(親要素の値を継承)、initial(初期値、通常content-box)』などがあります。

box-sizing（developer.mozilla.org）
https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing

コード/表示例　box-sizing: content-box

mainの領域が、width:1024px;となっています。ここに該当のボックスを表示させてみました。なんかはみ出てますけど、該当のボックスＣＳＳ値は、以下のようになっています。

幅を計測してみたところ、左右borderが2×2で4，左右paddingが16×2で32。1024+4+32で実際のwidthが1060pxになっています。そりゃ1024pxの領域に入れたらはみ出ます。overflow: hidden;を使っても良いんですけど、borderが不自然に途切れるとカッコ悪いかもしれません（狙って片方が切れたデザインにしている場合は可）。

box-sizing: border-boxで、padding&border分を領域に含める

次は上記のpadding,boder,要素widthは同じで、box-sizing: border-boxを指定してみます。CSS書き方は以下の通り。

こんな感じで、borderとpadding分が含まれて計算されたので、要素が1024px内に収まりました。ＳＰサイトとかで『padding分はみ出て、その分横に不自然にスライドしてしまう』みたいな対策にも使えそうです。

box-sizing: border-boxを指定してもはみ出る例（marginを足した分が領域をオーバー）

なんかgoogleのキーワード予測みたいなので『box-sizing: border-boxはみ出る』というのが出てきたので、ついでに検証してみます。いろいろやってみたけど、おそらく原因はmargin。以下のように、大き目のマージンを足してみます。

boxサイズは変わらないんですけど、margin足した分右側にはみ出してしまいました。margin分は事前に計算しておくか、flexboxとか自動的に調整してくれるやつを使ってもよさそうです。

あとがき・まとめ

まとめると、こんなところでしょうか。どっちにしろ、『padding/borderの分は～』とか『実際に表示されているボックスのサイズは～』みたいなのを意識しておくとよさそうな気がしました。