上下マージン重複転写問題

強迫性障害は私にとって本当に深刻な病気であることがわかりました。 。 。すべての状況を毎回テストする必要があります。 。 。でも!!!!!!!!!悲しいことに、私はあまり多くの状況を思い出せません。 。 。まだコードを書くときにエラーを起こしてトラブルシューティングをしなければなりません~もう我慢できません!ただし、この部分をここで要約しましょう~

次の部分では、マージンの重なりの問題のすべての状況をカバーします:

1. 2 通常の要素の上下のマージンどちらが選出されても、1 つのマージンに統合されます。

2 つの浮動要素にはマージン転送の問題は発生せず、上の要素の margin-bottom と下の要素の margin-top が 2 つの間のマージン値として加算されます。

2. リレーションシップに 2 つの要素が含まれている場合、親要素と子要素の上下のマージン値もマージされます (推奨学習: CSS ビデオ チュートリアル)

親要素が境界線を追加せず、幅と高さを設定しない場合、つまり、親要素が haslayout をトリガーしない場合	IE6、7 および標準ブラウザでは、子要素と親要素の高さが同じである場合、マージン転送の問題が発生します (子要素の上部が下にあります)。 (親要素の上端と直線、下端は親要素の下端と直線になります)、親要素は 2 つの値のうち大きい方を選択します。その値がマージン上部の値として使用されます。と親要素の margin-bottom の値! ！ ！ 子要素の margin-left および margin-right の値はまだ存在します
親要素が境界線を追加しない場合、ただし、幅、高さ、またはズームを 1 に設定します。つまり、親が haslayout をトリガーできる属性を追加するときです。	標準ブラウザではマージン転送が発生しますが、IE6 および 7 ではマージン転送が行われます。発生しません (つまり、子要素のマージンは相対的です。親要素の場合、そのマージンは親に渡されません)
親が境界線を追加するときそして親は haslayout をトリガーしません	Standard ブラウザ下ではマージンは渡されません IE6,7では子要素のマージンが完全に消えます！
親が境界線を追加し、親が haslayout をトリガーする (つまり、幅、高さ、またはズームを追加する: 1)、	IE6、7、および標準ブラウザでは証拠金渡しは発生しません！ ！ ！

IE6 および 7 の場合:

つまり、haslayout がトリガーされる限り、境界線が親要素に追加されるかどうか、または margin が追加されるかどうかは関係ありません。標準ブラウザでは通過しますが、IE6 および 7 では証拠金送金が発生しません。 ！ ！

標準ブラウザの場合:

境界線を追加するだけでマージン通過を回避できます。 ！ ！

親要素に境界線を追加すると、子要素と親要素の間の余白に分割線が作成され、この時点では結合は行われません。子要素にボーダーを追加しても、2つのマージン値が分離されていないため、依然として重なりが発生します。

親要素に複数のブロック サブ要素が含まれている場合、各サブ要素の上下のマージンが重なり、2 つの間のマージンとして大きい方が 2 つの間のマージン (最初のサブ要素) として選択されます。 -element 要素の上部は親要素と重なり（左図の上の白い部分がブラウザ上から見た白い部分です）、最後の子要素の下部は親要素と重なります。 IE6、7および標準ブラウザの表示効果は左記の通りです。

このとき、2 つのブロック要素がフローティング要素である場合、子要素と親要素の間でマージンの移動は行われません。このとき、上下のマージン値は、それぞれのマージン値が合計されます。標準ブラウザでは下図のように表示され、IE6では下図右のように表示されます。しかし、なぜ表示に違いがあるのでしょうか?

だって、神様！次から次へと波がやってくる！ブロック要素、水平マージン、浮動小数点は、IE6 で新たな互換性の問題、つまりダブルマージンのバグを引き起こしました (IE7 にはダブルマージンのバグがないことに注意してください!!!!)

Therefore

#実際には、まず haslyout をトリガーする属性を親要素に追加する必要があります。この記事では、IE6 および 7 ではマージン転送の問題とマージン値の消失の問題が発生しないことを確認します。

次に、標準ブラウザでは、子要素に float を追加することで次の問題を解決できることを考慮してください。フロートを追加する際に発生するマージン転送の問題があるのですが、この時にフロートを追加するとIE6ではダブルマージンのバグが発生するため、実際にはフローティングブロック要素のマージンをボーダーに置き換えるようにしています。パディング。変更できない場合は、要素に display: inline を追加します。;!

3. 2 つの Div (A, B) の上下の間にマージン値はありませんが、A にはマージンのあるサブ要素があります。サブ要素の値が 2 つに渡され、2 つの要素 A と B の間の余白が垂直方向にのみ埋められます。 ！ ！

この質問については、これで終わりです。実際は非常に簡単です。すべての状況を列挙しただけです。実際、要約は上記の要約の内容です。

このマージンの移動と重複は、2 つのマージン値の間に境界線がない、またはパディングによってマージン領域が分離されているためだと思います。 ！ ！ ！

以上が上下マージン重複転写問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。