CSSがマージンを折りたたむポイントは何ですか？
CSS2ボックスモデルは、 隣接する垂直マージンが崩壊する であることを示しています。
多くの設計バグの原因であるため、非常に煩わしいと思います。余白を折りたたむ目的を理解することで、いつ使用するか、不要なときに回避する方法を理解していただければ幸いです。
この機能の目的は何ですか？
「マージン」の一般的な意味は、「これを10px移動する」という意味ではなく、「この要素の横に10pxの空きスペースが必要です」という意味です。
私はいつも、これが段落で概念化するのが最も簡単だと思っています。
段落にmargin-top: 10pxを付けただけで、他の要素に余白がない場合、一連の段落は美しく間隔が空けられます。しかしもちろん、段落の下に別の要素を配置すると問題が発生します。二人は触れるだろう。
余白が折りたたまれていない場合は、前のコードにmargin-bottom: 10pxを追加することを躊躇します。これは、段落のペアが20ピクセル離れているのに対し、段落は他の要素から10ピクセルしか離れていないためです。
したがって、垂直マージンは崩壊します。 10pxの上下の余白を追加すると、「他の要素の余白の規則は関係ありません。各段落の上下に少なくとも10pxのパディングが必要です」と言います。