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

今回の話題

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;

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