Firefox マージントップ失敗の原因と解決策_体験談交換

なぜこの説明を翻訳するのでしょうか? css2 を翻訳されている方がいらっしゃいますが、実際に見てみると非常に荒いです（私だけではありません。翻訳者は本当に素晴らしいです！）。最近、css に触れることが多くなり、 xhtml ですが、数が増えれば増えるほど混乱が生じます。
今、私は、問題とは言えない問題がたくさんあると感じています。その原因は、我々の性急な理解にあるのです。例えば、雄牛のナイフで鶏を殺すことは、不可能ではありませんが、不合理で不適切です。根本原因が間違っているなら、見た目が間違っている、見た目から問題を解決し始めると、常に混乱するのは避けられません。
この説明では、「マージンの縮小」とは、2 つ以上のボックス モデル間の隣接するマージン属性 (関係は隣接またはネストすることができます) (空でないコンテンツ、パディング領域、境界線、または明確な分離方法を使用することはできません) を意味します。結合されて単一のマージンとして表されます。
CSS2.1では、水平方向の余白は折りたたまれません。
一部のボックス モデルでは垂直マージンが折りたたまれる場合があります:
1. 通常のドキュメント フローでは、2 つ以上のブロック レベルのボックス モデルの隣接する垂直マージンが折りたたまれます。
最終的なマージン値の計算方法は次のとおりです:
a. すべてが正の値である場合は、最大のものを取得します;
b. すべてが正の値ではない場合は、絶対値を取得してから、 ;
c. 正の値がない場合は、絶対値をとり、0 から最大値を減算します。
注: 隣接するボックス モデルは DOM 要素から動的に生成される場合があり、隣接関係や継承関係はありません。
2. 隣接するモデルで、そのうちの 1 つがフローティングされている場合、フローティング ボックス モデルとその子要素の間であっても、垂直方向のマージンは折りたたまれません。
3. オーバーフロー属性が設定された要素とその子要素の間のマージンは折り返されません（オーバーフロー値が表示されている場合を除く）。
4. 絶対配置 (position:absolute) が設定されたボックス モデルの場合、子要素があっても垂直方向のマージンは折りたたまれません。
5. display:inline-block が設定されている要素の場合、子要素であっても垂直方向のマージンは折りたたまれません。
6. ボックス モデルの上下のマージンが隣接している場合、そのマージンが崩れてしまう可能性があります。この場合、要素の位置は、隣接する要素のマージンが折り畳まれているかどうかによって決まります。
a. 要素のマージンとその親要素のマージントップが一緒に折り畳まれている場合、ボックスモデルのボーダートップの境界定義は親要素の境界定義と同じになります。
b. さらに、どの要素の親要素もマージンの折り畳みに参加しないか、親要素のマージンボトムのみが計算に参加します。要素の境界上端がゼロ以外の場合、要素の境界上端の位置は以前と同じになります。
クリア操作が適用された要素のマージントップは、そのブロックレベルの親要素のマージンボトムと一緒に折り畳まれることはありません。
折り目で覆われた要素の位置は、折り畳まれた他の要素の位置に影響を与えないことに注意してください。境界線と上部の境界線の位置は、これらの要素の子要素をレイアウトする場合にのみ必要です。
7. ルート要素の垂直マージンは折りたたまれません。
浮動ブロックレベル要素のマージンボトムは、その兄弟要素がそうでない限り、浮動された次のインフローブロックレベル兄弟要素（浮動された次のインフローブロックレベル兄弟）のマージントップに常に隣接します。クリア操作を使用します。
フローティング ブロック レベル要素のマージン トップは、最初のフローティング ブロック レベルの子 (フローティングされた最初のインフロー ブロック レベルの子) のマージン トップに隣接します (要素にボーダー トップがない場合、 padding-top はなく、子要素はクリアされません)。
フローティング ブロック レベル要素の margin-bottom が次の条件を満たす場合、その要素は最後のフローティング ブロック レベル子要素の margin-bottom に隣接します (要素が padding-bottom または border を指定していない場合)。 ):
a. Height:auto が指定されている
b. min-height が要素の実際の高さ (高さ) より小さい
c. max-height が要素の実際の高さより大きい ( height)
要素の最小値 - 高さ属性が 0 に設定されている場合、その要素が所有するマージンは隣接しており、border-top と border-bottom も、padding-top とpadding-bottom もありません。 height 属性は 0 または auto にすることができます。インライン ボックス モデル (ライン ボックス) を含めることはできません。また、すべての浮動子要素 (存在する場合) のマージンは隣接しています。
要素が所有するマージンが折りたたまれ、クリア操作を使用すると、そのマージントップはすぐ後の兄弟要素の隣接するマージンと折りたたまれますが、その結果、そのマージンはそのマージンと一致しなくなります。 . ブロックレベルの親要素のマージン下部の折りたたみ。
折り畳む操作は、パディング、マージン、およびボーダーの値に基づいています (つまり、ブラウザがこれらすべての値を解析した後)。折り畳まれたマージンの計算により、使用されているさまざまなマージン値が上書きされます。

コードをコピー コードは次のとおりです:

//br 行を追加しないと、id1 のマージン上部がFIREFOX は:20px d0 で動作するため、d0 の上部と本文の間には 20px の隙間があり、d1 と d0 の間には隙間がなく、IE では正常に表示されます。