border の幅分ボックスからはみ出たときの対処

cssでのボックスの幅は width と padding と border-width の合計となります。
width : 250px;
padding 20px;
border-width : 20px;
実際の幅は330px

box-sizing:border-box を指定すると
width に書いた値が padding,border-width を含んだものになるのでwidth:250px;となります。

レスポンシブの際に横幅100%にすることが多い時
width: 100%;
height: auto;
この場合にborderを指定するとはみ出てしまいますが、box-sizing:border-box ではみ出し防止になります。

admin

cl0606

コメントを残す

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