CSSボックスmodel_html/css_WEB-ITnose

概要

CSS ボックス モデルは、ボックス モデルとも呼ばれ、要素ボックスが要素のコンテンツ、パディング、境界線、余白を処理する方法を指定します。

要素ボックスの最も内側の部分が実際のコンテンツです。 コンテンツを直接囲んでいるのが内側のマージンです。 境界線の外側は外側のマージンです。したがって、後続の要素はブロックされません。

パディング、境界線、マージンはすべてオプションであり、デフォルト値はゼロです。ただし、多くの要素には、ユーザー エージェント スタイル シート (ブラウザー組み込みスタイル シート) によって設定されたマージンとパディングが含まれます。これらのブラウザ スタイルは、要素のマージンとパディングをゼロに設定することでオーバーライドできます。

* {    margin: 0;    padding: 0;}

CSS では、幅と高さはコンテンツ領域の幅と高さを指します。パディング、境界線、余白を増やしてもコンテンツ領域のサイズには影響しませんが、要素のボックス全体のサイズは大きくなります。

ボックスの両側に 10 ピクセルのマージンと 5 ピクセルのパディングがあると仮定します。この要素ボックスを 100 ピクセルにしたい場合は、コンテンツの幅を 70 ピクセルに設定する必要があります。以下の画像を参照してください:

#box {    width: 70px;    margin: 10px;    padding: 5px;}

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

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

要素の境界線を囲む空のスペースがマージンです。マージンを設定すると、要素の外側に追加の「空白」が作成されます。

オプションの値

マージンを設定する最も簡単な方法は、ピクセル (px)、インチ (in)、ミリメートル (mm)、em、および auto などの任意の長さの単位を受け入れる margin プロパティを使用することです。

h1 要素の各辺に 1/4 インチ幅のマージンを設定します

h1 {margin : 0.25in;}

h1 要素の 4 つの辺に異なるマージンを定義します

h1 {margin : 10px 0px 15px 5px;}

これらの値の順序は margin-top から始まります要素の周りを時計回りに回転します:

margin: top right bottom left

は

h1 {    margin-top: 10px;    margin-right: 0px;    margin-bottom: 15px;    margin-left: 15px;}

マージンのパーセンテージ値を設定します

p {margin : 10%;}

パーセンテージは、親要素の幅を基準にして計算されます。

値コピー

値コピーとは、デフォルトの場合、余白の4桁の属性値部分を自動で埋めることを指します。

4 つの値は部分的にデフォルトになっており、次の 3 つの状況があります:

1 つの値、他の 3 つの値はこの値からコピーされます (上マージン)

p {margin: 1px;}    /* 等价于 1px 1px 1px 1px */

2 の値、3 番目の値 (下マージン) は 1 番目の値 (上マージン) からコピーされ、4 番目の値 (左マージン) は 2 番目の値 (右マージン) からコピーされます

h2 {margin: 0.5em 1em;}    /* 等价于 0.5em 1em 0.5em 1em */

3 つの値、4 番目の最初の値 (左マージン) は2 番目の値 (右マージン)

h1 {margin: 0.25em 1em 0.5em;}    /* 等价于 0.25em 1em 0.5em 1em */

まとめると、上下左右に対応し、最初の値が上になります。

値のマージ

マージンのマージとは、 2 つの垂直マージンが交わるときです。 、マージンを形成します。

結合されたマージンの高さは、結合された 2 つのマージンの高さのうち大きい方と等しくなります。

要素が別の要素の上に表示される場合、最初の要素の下マージンと 2 番目の要素の上マージンがマージされます。以下の画像を見てください:

要素が別の要素内に含まれている場合 (マージンを区切るパディングや境界線がないと仮定して)、それらの上下のマージンもマージされます。以下の画像を参照してください:

マージンはあるが境界線やパディングがない空の要素があると仮定すると、マージンはそれ自体とマージすることもできます。この場合、上のマージンと下のマージンが重なってマージされます:

このマージンが別の要素のマージンと一致する場合、それもマージされます:

マージンのマージによりページスペースを節約できますページをより美しくします。

注: マージンの結合は、通常のドキュメント フローのブロック ボックスの垂直マージンに対してのみ発生します。 インラインボックス、フローティングボックス、または絶対配置の間の余白はマージされません。

要素の境界線は、要素のコンテンツとパディングを囲む 1 つ以上の線です。

CSS border プロパティを使用すると、要素の境界線のスタイル、幅、色を指定できます。

CSS ボーダーは内容が豊富なので、このページが長くなるのを避けるため、単独で紹介し、後でリンクを掲載します。

要素のパディングは、境界線とコンテンツ領域の間にあります。

CSS のパディング プロパティは、要素の境界線とそのコンテンツの間の空白を定義します。

内边距的使用与外边距的使用类似。

给 h1 元素的各边添加 10 像素的内边距

h1 {padding: 10px;}

您还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值

h1 {padding: 10px 0.25em 2ex 20%;}

同样可以分别设置四个方位

h1 {    padding-top: 10px;    padding-right: 0.25em;    padding-bottom: 2ex;    padding-left: 20%;}

内边距与外边距一样，遵循值复制的规则。

• 如果缺少左外边距的值，则使用右外边距的值。

• 如果缺少下外边距的值，则使用上外边距的值。

• 如果缺少右外边距的值，则使用上外边距的值。