0

重複の可能性:
子要素のマージンが親要素を移動する

子 div を含む親 div があります。Parent本文の最初の要素で、特定の CSS スタイルはありません。私が設定したとき

.child {
   margin-top: 10px;
}

最終的な結果として、 の topchildは依然として と位置合わせされparentます。10 ピクセル下に移動する代わりにchild、私の親は 10 ピクセル下に移動します。

パディングを追加するとうまくいくことがわかりましたparentが、これは問題を解決する方法ではないことを読みました。なんで?必要に応じてonmargin-rightを実行できます。同様に、必要に応じて、正しい結果を取得することもできます。padding-rightparentmargin-toppadding-top

子要素のマージンで親要素を移動すると、誰かが言った:

トップマージンが必要な場合は...? 本当に解決策ではありません。トップマージンが必要な場合、これは実際には解決策ではありません。

彼は何を言おうとしているのですか?説明してください。

4

1 に答える 1

1

Mozilla Developer Network のCSS Margin Collapsingから:

親と最初/最後の子

ブロックの margin-top とその最初の子ブロックの margin-top を分離する境界線、パディング、インライン コンテンツ、またはクリアランスがない場合 [...]、それらのマージンは崩壊します。折りたたまれたマージンは、親の外に出ます。

于 2013-01-01T12:40:17.983 に答える