このフィドルを見る時間を少し与えてください。ここで、Container1 と Container2 には background-color:#ccc と h1 があり、.logo div にはマージンがあります。左マージンと右マージンは正常に機能しています。Margin-Top と Bottom が正しく機能しない理由。
これは、コンテナにマージンのある最初の要素がある場合にのみ発生することが提案されています。なぜこれが起こるのか知っていますか？適当な理由で答えなさい。
1 に答える
1
これはマージン崩壊効果によるもので、上下のマージンが崩壊することを意味します。これは、要素が内部で展開されない理由でもあります。
ここでより多くの説明：
w3.org/TR/CSS2/box.html#collapsing-margins、developer.mozilla.org/en-US/docs/CSS/margin_collapsing、
およびcolinaarts.com/articles/the-magic-of-overflow-hidden
を参照してください。 /
それを修正する：
折り畳みを修正するにはさまざまな方法があります。コンテナをfloat: left|right(< またはposition: absolute, に設定するborder: solid 1px(理解を深めるためにも試しborder-top: solid 1px;てください) に設定するかmin-height: height-with-margins、折り畳みを防ぐように設定することができます。
覚えておくと良いことは次のとおりです。
マージンの崩壊が発生すると、ボックス間でマージンが共有されるため、マージン領域が明確に定義されません。
浮動要素と絶対配置要素のマージンは決して崩壊しません。
于 2012-10-18T09:01:43.570 に答える