ボーダーで要素に幅を適用する方法？

Question

私のページレイアウトにTwitter Bootstrapを使用していて、CSS3 Box Shadowを1列に挿入したいとします。

私が抱えている唯一の問題は、ボックスの影が1pxの境界線を持っていることです。これで2番目の列が次の行に折り返されます。私は境界を削除する場合、それはうまく整列します。

2pxを列幅から引くと、正確に見えます。しかし、私はBootstrapの流体レイアウト（ピクセルではなく、％に基づいています）を利用したいので、単純に<div>を2ピクセル以上狭くする簡単な方法はありません。

罫線がアイテムの幅内に収まらないというのは本当に嫌です。誰も私の<div>がボーダーであっても現在の幅を尊重する方法を見ていますか？

Answer 1

使用

-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 

と境界線の幅は、ボックス内に追加されます。

ここには、100x100のサイズと20pxの境界線を持つ2つのdivがある例を示します。最初のものには「ボックスサイズ」があり、2番目のものにはありません：http://jsfiddle.net/y3zxC/。