3分で読める！【CSS】要素が画面の横幅に収まらない場合の対処方法

本日のテーマは、

要素が画面の横幅に収まらない場合の対処方法についてです。

※本日のテーマはあくまで1つのケースのことです。

要素が画面に収まらない原因は他にもある可能性はあります。

どういう時に収まらなくなるのか？

結論、paddingプロパティを使用した場合です。

具体的に言うと、

paddingで横幅を広くすると画面全体の横幅が増えます。

その結果、画面に治りきらなかった要素が下に回り込んでしまいます。

例）

padding-left:20px;→画面全体の横幅も＋20px

対処方法

CSSで「box-sizing:border-box;」を指定すれば解決します。

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

※「*」は全ての要素を指定することができます。

box-sizing:border-box;は、

paddingプロパティによる画面全体の幅の追加を阻止してくれます。

※marginプロパティは使用しても画面全体の幅は広がりません。