「margin-top: -8px」が上にシフトし、「margin-bottom: 8px」が下にシフトするのはなぜですか?

CSS の負のマージンの仕組みと上マージンと下マージンの違い

CSS では、負のマージンは、変更することで視覚効果を生み出すために使用されます。要素の位置。上部マージンに適用すると、負の値は上方へのシフトを作成し、負の下部マージンは要素を下方に押し出します。

次の例を考えてみましょう。

ここで、負のマージン上部の値は-8px は、要素をその高さの半分だけ上にシフトします。これは、マージン ボックス (要素を囲む非表示のスペース) をコンテンツ ボックス (表示領域) の端の上に拡張することで実現されます。

なぜ margin-top:-8px ≠ margin-bottom:8px?

margin-top:-8px と margin-bottom:8px は一見似ていますが、効果が異なります。前者は要素を上方に移動させますが、後者は要素を下方に押します。この違いは、マージンのアンカー ポイントの位置から生じます。

CSS では、すべてのマージンは、包含ブロックの境界ボックスの端に固定されます。位置指定された要素の場合、それを含むブロックが要素の親になります。 margin-top を使用する場合、アンカー ポイントは親の境界ボックスの上端にあります。したがって、負の値は要素をこの点より上に移動します。

逆に、margin-bottom は、要素を含むブロックの下端に固定します。その結果、負の下部マージンは要素を上に押し上げるのではなく、下に移動します。

直感的な理解

負の上部マージンはマージン ボックスの高さを効果的に減らし、要素が上に移動したような錯覚。一方、負の下部マージンを指定すると、マージン ボックスの高さが増加し、要素が下に移動したかのように見えます。

以上が「margin-top: -8px」が上にシフトし、「margin-bottom: 8px」が下にシフトするのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。