子要素の上部マージンがボーダーレスな親を超えて広がるのはなぜですか?

親要素に境界線がない場合のマージン上部のインデント

上部マージンのある要素が境界線を超えて広がるシナリオが発生した場合親要素には上枠がないため、混乱する可能性があります。このインデントにより、レイアウトに望ましくないスペースが生じる可能性があります。

この特定の例では、オレンジ色の div が、上枠のない緑色の div 内にネストされています。上マージンが 30 ピクセルであるにもかかわらず、オレンジ色の div は親の下にはみ出しています。

この問題に対処するには、考えられる解決策の 1 つは、緑色の div に上端の境界線を導入することです。ただし、ボーダーレスの上端が設計要件である場合、これは実現できない可能性があります。

別のアプローチには、緑色の div (.body) に「overflow: auto」を適用することが含まれます。この手法により、要素間のマージンの崩壊が防止され、オレンジ色の div が親の境界内に効果的に含まれます。

以下の CSS コード スニペットは、このソリューションの実装を示しています。

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

これを適用することで、修正すると、オレンジ色の div が緑色の div を超えてインデントされなくなり、レイアウトが意図した間隔を維持できるようになります。

以上が子要素の上部マージンがボーダーレスな親を超えて広がるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。