CSS の負のマージン: 実際にはどのように機能するのでしょうか?

CSS の負のマージン: 詳細

負のマージンは、CSS では有効ですが、多くの場合、混乱や誤解を引き起こします。この記事では、負のマージンの複雑さを掘り下げ、そのメカニズムを探り、margin-top: -5px と margin-bottom: 5px の区別などの一般的な質問に対処します。

CSS 仕様によると、負のマージンはサイズを小さくします。コンテンツとパディングボックスには影響を与えずに、マージンボックスを削除します。これは、提供された例のように絶対的に配置された要素に適用すると視覚的に明らかです。マージン ボックス内のスペースが失われているにもかかわらず、マージン ボックスの変位により、要素自体は上にシフトされます。

マージン ボックスを外側に拡張する正のマージンとは異なり、負のマージンは「盛り上がる」マージンボックスを視覚的に縮小して要素を削除します。この縮小により、要素が上に押し上げられているような錯覚が生じます。

margin-top:-5px と margin-bottom:5px の違い

margin-top の違い:-5px と margin-bottom:5px は相対的な位置にあります。 margin-top:-5px はマージン ボックスを上に押し上げ、要素を効果的に 5 ピクセル下にシフトします。一方、 margin-bottom:5px は、要素の下にあるマージン ボックスのサイズを大きくし、下に 5 ピクセル移動させます。

垂直方向の中央揃えのコンテキストでは、上部と下部の両方を設定することが重要です。適切な配置を実現するには、マージンを -8px ではなく -50% に設定します。これは、マージンのパーセンテージが、ブロックを含むブロックの高さではなく幅に基づいて計算されるためです。

以上がCSS の負のマージン: 実際にはどのように機能するのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。