デフォルトのボックスモデルではwidth、heightの値にはpaddingとborderの値を含みませんが、box-sizingプロパティの値にborder-boxを指定すると、widthとheightの値はpaddingとborderの幅を含むようになります。 #box-sizing{ -moz-box-sizing: border-box; box-sizing: border-box; } 特にコンテンツの幅を指定するときや、Fluid Grid Systemを作成するときに計算が簡単になります。 例えば以下の図のような4カラムのGrid Systemで2カラム分の相対幅を求めるとします。 デフォルトの場合2カラム分の幅は60px×2+20px=140px、全体の幅は320pxとなるので、140÷320×100=43.75%となります。これにmarginやpaddingでガターの幅
![使えるとレスポンシブWebデザインに便利なCSS](https://cdn-ak-scissors.b.st-hatena.com/image/square/e5f111ccb0a68e8bab244d04736b939882601c72/height=288;version=1;width=512/https%3A%2F%2Fdesign-spice.com%2Fwp%2Fwp-content%2Fuploads%2F2013%2F05%2Ftn_css-rwd.jpg)