[CSS] paddingとmarginの使用方法

box-sizing:content-box;

box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;

初期状態ではcontent-boxとなっており、boaderとpaddingをwidthとheightに含めない、通常状態

box-sizing:border-box;

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

border-boxと設定すると、boaderとpaddingをwidthとheightに含める、レスポンシブルデザインなどのwidthとheightを%で設定する時に、IE8以上のブラウザで便利である。

box-sizing:inherit;

box-sizing:inherit;
-moz-box-sizing:inherit;
-webkit-box-sizing:inherit;

親要素の値を継承する。具体的に言うと、親のdivに設定されているbox-sizingを継承するために、設定する。

ここで注意が必要なのが、marginは要素に含まれないということである。

参考情報

参考情報としてwidthを%で設定する時に、下記を利用するとさらに便利である。

width : 98% ; /* IE8以下とAndroid4.3以下用 */
width : -webkit-calc(100% - 20px) ;
width : -moz-calc(100% - 20px) ;
width : calc(100% - 20px) ;

「calc」とはCSS3において、計算を可能にしてくれるものです。