CSS3のボックスのサイズ

CSS3 box-sizing幅と高さを設定するプロパティは、パディング（パディング）と境界（ボーダー）が含ま属性。

ブラウザのサポート

表中の数字は、プロパティバージョン番号をサポートする最初のブラウザを表します。

すぐに数-webkit-ブラウザまたは-moz-指定された接頭辞の後に。

CSS3ボックスのサイズ変更プロパティを使用しないでください。

デフォルトでは、幅、次のようなハイエンド・コンピューティング要素である方法。

幅（幅）+パディング（パディング）+ボーダー（境界線）は、実際の幅の要素を=

高さ（高さ）+パディング（パディング）+ボーダー（国境）=要素の実際の高さ

これは、我々は、要素の幅/高さを設定すると、要素の表示の高さと幅が大きくなることを意味する（なぜならパディングと境界要素の幅/高さを計算します）を。

これらの2つの<div>要素、幅と高さが同じ設定が、けれども一貫性のない本当のショーのサイズDIV2指定されたパディング理由は次のとおりです。

あなたはより小さなボックスを取得するには、このメソッドを使用するとマージン内に含まれている場合、あなたのアカウントに国境を取り、マージン幅内にする必要があります。

CSS3のbox-sizingプロパティこの問題に良い解決策。

CSS3ボックスのサイズ変更プロパティを使用します

CSS3 box-sizing属性は、要素の幅と高さのpadding（パディング）と境界（ボーダー）が含まれています。

あなたが要素に設定した場合はbox-sizing: border-box;パディング（パディング）と境界線（ボーダー）もの幅と高さに含まれています：

ここでは、2つの<div>要素が追加されているbox-sizing: border-box;簡単な例のプロパティを。

結果から判断するとbox-sizing: border-box;良い結果、それはまた、必要とする多くの開発者です。

次のコードは、サイズを表示するために、より直感的な方法ですべての要素を作ることができます。 多くのブラウザは、すでにサポートbox-sizing: border-box; （すべてではないが、を-幅を設定入力し、テキスト要素理由である：100％;ポストの幅は同じではありません）。

ボックスサイズを使用して、すべての要素がよりお勧めします。