CSSボックスモデル

CSSボックスモデル（ボックスモデル）

すべてのHTML要素をCSSでボックスとして考えることができる、「ボックスモデル」は時に使用する設計とレイアウトに使用される用語です。

マージン、ボーダー、パディング、および実際のコンテンツ：それには、自然の中でHTML要素のCSSボックスモデルの周りにパッケージ化されたボックスです。

ボックスモデルは、私たちに要素の境界要素の周りに配置され、他の要素との間のスペースを可能にします。

下の写真は、ボックスモデル（ボックスモデル）を示しています。

説明のさまざまな部分：

• マージン（余白） -マージンが透明である、境界線の外側の領域をクリアします。
• ボーダー（ボーダー） -内側縁および外部国境のコンテンツの周囲。
• パディング（パディング） -パディングが透明であり、コンテンツの周りの領域をクリアします。
• 内容（コンテンツ） -ボックスの内容は、テキストや画像を表示します。

正しく設定されているすべてのブラウザで要素の幅と高さのために、あなたはボックスモデルがどのように動作するかを知る必要があります。

幅と要素の高さ

重要：CSS要素の幅を指定し、高さの属性をすると、あなただけのコンテンツ領域の幅と高さを設定します。あなたはまた、パディング、ボーダー、および余白を追加する必要があり、要素のフルサイズを知っています。 。

以下の例の要素の合計幅は300ピクセルです。

のは、数学をやってみましょう：
250ピクセル（幅）
+ 20ピクセル（左+右パディング）
+ 10pxの（左+右境界）
+ 20ピクセル（左+右マージン）
= 300ピクセル

あなたは宇宙の唯一の250ピクセルを持っている想像してみてください。 私たちは、要素250ピクセルの合計幅を設定してみましょう：

式の最後の要素の合計幅はこれです：

要素=左パディング+幅+右パディング+左+右マージンからのボックスの境界線+左+右サイドの合計幅

要素最終的な計算式の全高はこれです：

下の余白上の要素=高さ+トップ下の境界にパディング+パディング+ + +下境界線+マージンの高さの合計

ブラウザの互換性の問題

ページが適切なDTDに設定されると、ほとんどのブラウザでは、コンテンツをレンダリングするために上記のアイコンに従います。 しかし、IEのレンダリングが正しくありません。5及び6。 W3C仕様書によると、要素内容の占有スペースはwidthプロパティで設定され、コンテンツの周囲のパディングとボーダーは別計算です。 残念ながら、IE5.X 6と奇妙なモードで、独自の非標準モデルを使用しています。 これらのブラウザの幅はwidth属性は、コンテンツが、コンテンツ、パディングとボーダーの幅の合計ではありません。

この問題を解決する方法があるが。 しかし、最善の解決策は、この問題を回避することです。 つまり、指定された幅を持つ要素にパディングを追加しますが、親要素と子要素にパディングやマージンを追加しようとしないでください。

IE8とIEの以前のバージョンへのWidthプロパティは、パディングとボーダー幅をサポートしていません。

IE8およびそれ以前の問題は、HTMLページの宣言<！DOCTYPE HTML>缶することができます互換性の問題を解決します。