ボックスmodel_html/css_WEB-ITnoseの深い理解

目次 [1] 幅と高さ [2] パディング [3] マージン [4] 境界線

前の単語

すべての文書要素は、要素ボックスと呼ばれる長方形のボックスは、ドキュメント レイアウト内で要素が占めるスペースの量を表します。さらに、各ボックスは他の要素ボックスの位置とサイズに影響します

幅と高さ

CSS では、ブロックレベルの要素に明示的な高さを設定できます。指定した高さがコンテンツの表示に必要な高さより大きい場合、追加の高さによって余分なパディングがあるかのような視覚効果が作成されます。指定した高さがコンテンツの表示に必要な高さよりも小さい場合は、スクロール バーが追加されます。要素。要素コンテンツの高さが要素ボックスの高さより大きい場合、ブラウザの特定の動作はオーバーフロー属性に依存します。

幅は、左の内側の境界線から右の内側の境界線までの距離として定義されます。

高さが定義されます 上部の内側の境界線から下部の内側の境界線までの距離として定義されます

[注] 幅と高さは、インラインの非置換要素には適用できず、負の値にすることはできません

幅/高さ

値: auto |

初期値: auto

レベル要素と置換要素

継承: なし

パーセンテージ: 含まれるブロックの幅/高さに相対

計算値: auto およびパーセンテージ値の場合、指定に従って決定されます。 ; それ以外の場合は、要素にこの属性を適用できない場合を除き、絶対的な長さ (自動の場合)

IE6 - ブラウザの幅と高さが定義されます。要素ボックスのコンテンツ領域のサイズではなく、表示される要素ボックスのサイズ

Padding

インライン要素の場合、左のパディングは要素の先頭に適用され、右のパディングは要素の先頭に適用されます。

[注] パディングは負の値にはできません。

padding

値: [

継承: なし

パーセント:包含ブロックの幅に相対的な

Margin

マージンを設定すると、要素の外側に追加の空白が作成されます。空白は通常、他の要素を配置できない領域と背景を指します。

マージンを適用できます。 インライン要素の場合、上下のマージンは行の高さに影響しません。上下の余白は実際には透明なので、このステートメントには視覚的な効果はありません。左マージンは要素の先頭に適用され、右マージンは要素の末尾に適用されます。 ]{1,4} | 継承

初期値: 未定義

適用対象: すべての要素

継承: なし

パーセンテージ: 幅に相対包含ブロックの

垂直マージンを結合

隣接する兄弟要素のマージン結合はマージン オーバーレイとも呼ばれます

含まれる親子要素のマージンのマージは、マージン転送とも呼ばれます

包含ブロックにボーダーまたはパディングを設定する場合、その子要素のマージンは包含ブロックに含まれるため、外側のマージン 距離パス

【1个值】margin: top|right|bottom|left;【2个值】margin: top|bottom left|right;【3个值】margin: top left|right bottom;【4个值】margin: top right bottom left;

負のマージン

両方の垂直マージンが負の値に設定されている場合、ブラウザは 2 つのマージンの最大絶対値を選択します。正のマージンが負のマージンと結合される場合、負のマージンの絶対値が正のマージンから減算されます。

境界線

要素の外側のマージンは要素 A の境界線です。 border は、要素のコンテンツのパディングを囲む 1 つ以上の線です。境界線は、太い線、スタイル、色の 3 つの部分で構成されます。

インライン要素の場合、境界線は実際には各線の外側の次のピクセルに描画されます。線は互いに近いため、境界線は重なり合います。インライン要素の境界線にどのような幅が設定されても、行の高さには影響しません。ただし、左と右の境界線はそれぞれ要素の先頭と末尾に表示されます

国境移動に関する詳しい情報はこちら