経緯

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

そういうときに

box-sizing: border-box;

と指定しておくと、widthとheightにpaddingやborderの幅が含まれるようになります。

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

*{
  box-sizing: border-box;
}

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

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

問題

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

CSS

#test-area{
  box-sizing: border-box;
  padding: 20px;
}

HTML

<div id="test-area"></div>

JS

$('#test-area').width(200);

このとき、こちらとしては、#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)ではなく、

$('#test-area').css('width', 200)

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

まとめ

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