CSSボックスモデル

CSS ボックスモデル

CSS では、「ボックスモデル」という用語がデザインとレイアウトで使用されます。

CSS ボックスモデルは本質的に、マージン、ボーダー、パディング、実際のコンテンツなど、周囲の HTML 要素をカプセル化するボックスです。

ボックスモデルを使用すると、他の要素と周囲の要素の境界線の間のスペースに要素を配置できます。

次の図はボックスモデルを示しています:

さまざまな部分の説明:

マージン (マージン) - 境界線の外側の領域をクリアし、マージンは透明になります。
境界線 - パディングと外側のコンテンツの周囲の境界線。
Padding - コンテンツの周囲の領域をクリアし、パディングを透明にします。
コンテンツ - テキストと画像を示すボックスのコンテンツ。

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

要素の幅と高さ

重要: CSS 要素の幅と高さのプロパティを指定するときは、コンテンツ領域の幅と高さのみを設定することになります。要素を完全なサイズにするには、パディング、境界線、およびマージンも追加する必要があることに注意してください。 .

以下の例の要素の合計幅は 300px です:

width:250px;
padding:10px;
border:5px plain grey;
margin:10px;

自分で計算してみましょう:
250px (幅)
+ 20px (左 + 右パディング)
+ 10px (左 + 右境界線)
+ 20px (左 + 右マージン)
= 300px

想像してみてください、スペースは 250 ピクセルしかありません。合計幅 250 ピクセルの要素を設定しましょう:

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>

<body>

<img src="http://img.php.cn/upload/article/000/000/015/5c67dc797e790355.gif" width="250" height="250" />

<div class="ex">The picture above is 250px wide.
The total width of this element is also 250px.</div>

</body>
</html>

インスタンスの実行 »

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

要素の合計幅の最終的な計算式は次のとおりです:

要素の合計幅 = width + left padding + right padding + left border + right border + left margin + right margin

最終的な計算式要素の合計の高さは次のとおりです:

要素の合計高さ = 高さ + 上部パディング + 下部パディング + 上部境界線 + 下部境界線 + 上部マージン + 下部マージン

ブラウザーの互換性の問題

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

ただし、この問題を解決する方法はあります。しかし、現時点での最善の解決策は、問題を回避することです。つまり、指定された幅のパディングを要素に追加する代わりに、要素の親要素と子要素にパディングまたはマージンを追加してみてください。

IE8 以前の IE バージョンは、パディング幅と境界線幅の属性設定をサポートしていません。

IE8 以前のバージョンの非互換性の問題を解決するには、HTML ページで <!DOCTYPE html> を宣言できます。

CSSボックスモデル