box-sizingについての考察

個人はてなブログからの移行記事です。

今回の話題


box-sizing: border-box;

box-sizingっていうプロパティはCSS3で加えられたプロパティで、初期値はcontent-boxになっているらしい。

例えば、inputタグに対して、


padding: 1rem;
width: 100%;

を指定すると、paddingの1rem分だけ横にフォームが飛び出してしまいます。

これを、良い感じでやってくれるのが、


box-sizing: border-box;

これです。

これを追記すると、paddingを内側に含めて、widthを計算してくれるらしい。

高さ(height)も計算してくれて、しかも、borderの太さなども含めてくれるみたいです。

ピクセル単位でズレている、みたいなときはこれも疑ってみたほうがいいかもしれません。

ちなみに、inheritという値もあって、これは親要素の値を継承するらしいです。

まとめ

ほとんどの場合、デフォルトで設定しておいたほうが良いという話もあります。

inputタグのスタイルを調整するときはまず


box-sizing: border-box;

を設定することにしました。

コメントする

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