paddingで左右余白をつけた時に横幅がはみ出してしまうのを解決する方法【box-sizing】

2020/03/12

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

横幅を指定した要素にpaddingで左右余白をつけると、
意図したサイズより大きくなってしまい困っている…!!

という方のお悩みを解決します！

cssのbox-sizingプロパティを使用することで1秒で対処することができますのでご安心ください〜！

box-sizingプロパティとは？

paddingとborderを要素の横幅や縦幅に含めるかどうかを指定するプロパティです。

デフォルトではcontent-boxとなっていて、paddingなどを要素の横幅に含めてくれません。

しかし、左右のpaddingの値も含めてコーディングをしないと、
横幅が100%を超えてしまい意図していない見た目になってしまいがち。

そこで活躍するのが、border-boxです。

box-sizingの値にborder-boxを指定することで、
paddingなどを横幅に含めてくれるので100%を超える問題をサクッと解決することができます。

それでは実際に、border-boxを指定した場合とそうでない場合の表示され方の違いを確認しましょう。

例えば、横幅240pxの要素に左右24pxの余白をpaddingでつけたい場合。

box-sizing:border-boxを指定しないデフォルト状態ですと、
paddingの値（48px）が横幅の240pxに含まれないので、
その要素の横幅は合計で288pxとなってしまいます。

しかし、border-boxを指定すればpaddingの値もwidthに含まれるようになるので、
意図した通り、240pxの要素の中に左右24pxずつ余白を作ることができます。

以下、border-boxの実装サンプルとなります！

See the Pen
gOpvjgg by 石森裕也 (@yuyaphotograph)
on CodePen.

要素それぞれにborder-boxを指定するのは面倒ですのでぼくは、一様につけちゃってます！

このようにすると、どの要素にもborder-boxが指定されるので悩む必要なくなりますのでおすすめ！

default.css

*{
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

他にもたくさんCSSのお悩み解決する記事ありますので興味ある方はチェックしてみてください〜！