CSS 子要素の margin-top が親要素に影響を与えるのはなぜですか_html/css_WEB-ITnose

詳細については、クリックしてください

この問題は、深刻な問題ではありませんが、解決方法はすでにわかっていますが、まだ原因がわかりません。 IE だけの問題であれば、あまり気にしませんが、問題は、すべてのハイエンド ブラウザがこのように動作することです。今日、ようやく何が起こっているのかを知ることができました。CSS2.1 のボックス モデルの仕様であることが判明しました...非常に厄介なルールではありますが。問題は以下のような2層のDiv構造で、Outer Div属性が「margin:0 auto」となっているため、Inner Divが無い場合、または、Inner Div の「margin-top」属性がない場合、すべてが期待どおりに機能します。しかし、Inner Div が "margin-top:10px" を設定すると、その親要素 Outer Div にも、そこにあるべきではない "margin-top:10px" 効果が適用されます。

Inner Div [margin-top: 10px]

Outer Div [margin: 0 auto]

HTML Demo Area

この「問題」…CSS2のボックスモデルで指定されている内容です.1 ??マージンの折りたたみ：

この仕様では、マージンの折りたたみという表現は、2 つ以上のボックス (互いに隣り合っていてもよい) の隣接するマージン (空ではないコンテンツ、パディング、境界領域、またはクリアランスがないこと) を意味します。またはネストされた ) を結合して 1 つのマージンを形成します。隣接する 2 つ以上のボックス要素すべてのマージンが 1 つの共有マージンに結合されます。隣接関係は、兄弟または入れ子になったボックス要素として定義され、それらの間には空ではないコンテンツ、パディング、境界線の分離はありません。

だから。 「ネストされた」ボックス要素も「隣接」しているとみなされ、折りたたみマージンも含まれます。この結合されたマージンは、実際には非常に一般的です。これは、記事の段落要素

で、多数の並列要素がある場合、それぞれの上下に 1em のマージンがあり、隣接する

追加ではなく 2em 間隔で配置されます。これは簡単に理解できますが、なぜ W3C がネストされた要素にマージンを共有することを望んでいるのか、そのような動作が必要な状況は思いつきません。 この問題が発生する条件を破壊する限り、この問題を回避する方法はたくさんあります。 Outer Divにpadding/borderを追加するか、Outer Div/Inner Divをfloat/position:absoluteに設定します(CSS2.1では、浮動要素と絶対位置要素はマージンフォールディングに参加しないと規定されています)。 異なる値のマージンの崩壊パフォーマンスの計算方法などの詳細については、W3C CSS2.1 仕様: マージンの崩壊を参照してください。

多くの解決策があります:

1. 親に overflow:hidden またはパディング、ボーダーを追加します

出典: http://www.cnblogs.com/hejia/archive/ 2013 /05/26/3099697.html

HTML5 コンテンツの詳細については、クリックしてください