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

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

こんにちは。

ゆうや(@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のお悩み解決する記事ありますので興味ある方はチェックしてみてください〜!

続きを読むボタンをCSSとjQueryで作る方法「うざい、絶滅して欲しい、不快感を感じる」続きを読むボタンをCSSとjQueryで作る方法 CSSのflexboxで横スクロールを実装する方法【CSS】flexboxで横スクロールを実装する方法

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です