要素の幅にはパディングが含まれますか? 質問する

• IEは以前はより便利だが非標準のものを使用していた「ボーダーボックス」ボックス モデル。このモデルでは、要素の幅にはパディングと境界線が含まれます。たとえば、幅が広く
  #foo { width: 10em; padding: 2em; border: 1em; }
  なります10em。

• 対照的に、標準を恐れるすべてのブラウザはデフォルトで「コンテンツボックス」ボックスモデル。このモデルでは、要素の幅はないパディングまたは境界線を含めます。たとえば、
  #foo { width: 10em; padding: 2em; border: 1em; }
  実際には幅が広くなります16em:各辺にパディング、10em各端に境界線。2em1em

最新バージョンのIEを使用している場合有効なマークアップ、良いドキュメントタイプ、 そして適切なヘッダー標準に準拠します。そうでない場合は、次のようにして、最新の標準準拠ブラウザに「border-box」の使用を強制できます。

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}