CSSテックラボ

box-sizingを使って padding や border を含めた横幅指定

2017年4月5日

デフォルトだと width で指定した横幅には padding や border が含まれないので、例えば padding が10ピクセルで横幅300ピクセルのボックスを用意したいとき、左右の padding を引いた値(280ピクセル)を横幅として指定する必要があります。
上記程度であれば少々不便でも対応できますが、例えば横幅100%でpaddingを10ピクセルとしたい場合、パーセントからピクセルを引くことはできないため、対応できません。

そのような時、box-sizing に border-box を指定することにより、width の値に padding や border が含まれるようになります。

必要な個所だけ指定するより全要素に指定したほうが管理しやすいので、下記のような指定をすると便利です。

*, *:before, *:after {
box-sizing: border-box;
}

※IE8以上であればベンダープレフィックス不要です。

Comment

コメントを残す

メールアドレスが公開されることはありません。

関連記事

リズムファクトリーはホームページの制作会社です。
ホームページ制作に関するご要望・ご相談はこちらからどうぞ。

株式会社リズムファクトリーでは現在、下記の職種について人材募集を行っております。
求人をクリックすると「求人情報サイトFind Job!」の求人詳細画面が開きますので、こちらからご応募下さい。

提供 : Webな人の求人情報サイト Find Job!