CSS の負のマージン: margin-top:-5 が margin-bottom:5 と同じではないのはなぜですか?

負のマージンの詳細: 行動、直感、相違点

CSS では負のマージンが許可されていますが、その効果は混乱を招く可能性があります。このトピックをわかりやすくするために、その動作を調査し、margin-top:-5 が margin-bottom:5 と同等ではない理由を理解しましょう。

負のマージンについて

Negativeマージンは境界線の外側に適用され、視覚的なマージンには表示されません。これは、コンテンツ ボックスとパディング ボックスはそのままにしてマージン ボックスに影響を与えるためです。絶対的に配置された要素の場合、負のマージンは、レイアウトに影響を与えることなく、指定された量だけ要素を移動します。

グラフィック表現

負の上部マージンを持つ要素を想像してください:

[上マージンが負の長方形の画像]

マージン ボックスは負の量だけ縮小しますが、コンテンツとパディング ボックスは影響を受けません。

背後にある直感負のマージン

負のマージンはマージン ボックスのサイズを小さくするため、要素を「隆起」させます。 margin-top

上マージンと下マージンの違い

margin-top:-8px は margin-bottom:8px と同じではありません。マージンが崩れるからです。要素の反対側に負のマージンと正のマージンの両方がある場合、マージンが崩れて負のマージンがなくなります。その結果、正味の動きは発生しません。

垂直方向のセンタリングに関するボーナス ヒント

横方向のマージン (つまり、上または下) に % を使用すると、値が計算されます。含まれるブロックの幅のパーセンテージとして。これにより、垂直方向のセンタリングに問題が発生する可能性があります。垂直方向のセンタリングには margin-top:-50vh を使用することをお勧めします。ここで、vh はビューポートの高さの単位を示します。

以上がCSS の負のマージン: margin-top:-5 が margin-bottom:5 と同じではないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。