経緯

グリッドデザインを使う上で、paddingborderの幅がwidthheightに含まれているとそこまで計算した上でmarginwidthを決定しないといけないので、結構面倒くさいです。

そういうときに

と指定しておくと、widthheightpaddingborderの幅が含まれるようになります。

自分がコーディングするとき、基本的には

とするようにしています。

しかしながら、今回、これに関して問題にぶち当たってしまったので、それのメモです。

問題

例えば、以下の状況のとき。

CSS

HTML

JS

このとき、こちらとしては、#test-areaの幅は200pxになってほしいですが、実際には240pxになってしまいます。

解決策

ちゃんとjQueryのドキュメントに書いてありました。

.width() | jQuery API Documentation

どうやら、jQueryのwidthメソッドはbox-sizingの指定によらず、コンテンツの幅を指定するメソッドのようです。
240px[width] + [右のpadding] + [左のpadding] = 200 + 20 + 20 pxというわけですね。

これを避けるためには、$('#test-area').width(200)ではなく、

とすることで、ちゃんと幅が200pxになってくれます。

まとめ

使い慣れているつもりのjQueryのメソッドやCSSも意外と見落としがあるみたいです。
困ったらドキュメントの確認はやはり鉄則ですね。