Margin-Top が親 Div を押し下げるのはなぜですか?境界線を使用せずにそれを修正するにはどうすればよいですか?

マージントップがボーダーなしで親 Div を押し下げる問題を修正する方法

マージントップのある子要素が上ボーダーのない親要素の内側にある場合、マージンは親要素を押し下げることができます。この動作は多くの場合望ましくないものです。解決策の 1 つは、親要素に上部の境界線を追加することですが、これが常に可能または望ましいとは限りません。

別の解決策は、親要素で overflow: auto プロパティを使用することです。これにより、マージンが崩れて親要素を押し下げるのを防ぎます。以下に例を示します:

.body {
    border: 1px solid black;
    border-top: none;
    border-bottom: none;
    width: 150px;
    height: 112px;
    background-color: lightgreen;
    overflow: auto;
}

.body .container {
    background-color: blue;
    height: 50px;
    width: 50%;
    margin-top: 30px;
}

この変更により、オレンジ色の div が緑色の div を押し下げることはなくなりました。

以上がMargin-Top が親 Div を押し下げるのはなぜですか?境界線を使用せずにそれを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。