要素幅の算出方法の変更

表示領域の制御について

要素の幅の算出方法を指定するには、box-sizingプロパティを指定します。
widthやheightにpaddingやborderの値を含めるか含めないかの指定ができます。

【構文】

							box-sizing:算出方法;
						

指定可能な値

値	説明	初期値
content-box	paddingとborderの値を要素の縦横幅に含めない	○
border-box	paddingとborderの値を要素の縦横幅に含める	-
inherit	親要素の値を継承する	-

サンプル

div.sample1 { -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box; } div.sample2 { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } div.sample3 { -webkit-box-sizing:inherit; -moz-box-sizing:inherit; box-sizing:inherit; }