原文：https://www.smashingmagazine....已经收录在qq44924588...，更多往期好评文章已归类，还有很多我的文档和教程资料也都整理好了。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。当我们学习CSS时，我们大多数人首先学习的是CSS中盒子的各个部分的细节，它们被称为CSS盒子，模型。“盒子模型”中的元素之一是边距，盒子周围的透明区域将其他元素推离盒子内容。margin-top、margin-right、margin-bottom和margin-left属性以及一次设置所有四个属性的简写边距在CSS1中进行了描述。边距似乎是一件相当简单的事情，但是，在本文中，我们将看看与边距有关的一些令人困惑和有趣的事情。特别是边距如何相互作用，以及边距重叠效应。CSS盒子模型CSS盒子模型是指一个盒子的各个部分——content、padding、border和margin，它们之前是如何布局和交互的，如下：盒子的四个margin属性和maring的缩写都是在CSS1中定义。CSS2.1规范有一个演示框模型的插图，还定义了用于描述各种框的术语，包括内容框、填充框、边框框和边距框。现在有一个3级盒模型规范草案。本规范引用CSS2作为框模型和边距定义，因此我们将在本文的大部分内容中使用CSS2定义。边距重叠CSS1规范定义了边距，也定义了垂直边距重叠。如果您考虑到早期使用CSS作为文档格式化语言，则边距重叠是有道理的。边距重叠意味着当一个底部边距的标题后面跟着一个顶部边距的段落时，它们之间不会有太大的间隙。当两个边距重叠时，它们被组合在一起，两个元素之间的空间取较大的一个。较小的边距位于较大的边距内。在以下情况下边距重叠：完全空框父元素的相邻兄弟元素和第一个或最后一个子元素依次看到这些场景。AdjacentSiblingsOverlappingMargins最初的描述是为了演示相邻兄弟之间的边距如何重叠。除了下面提到的情况，如果两个元素在正常流中依次显示，第一个元素的底部外边距将与下面元素的顶部外边距重叠。在下面的示例中，有三个div元素。第一个div的顶部和底部边距均为50px。第二个div的上下边距为20px。第三个div的顶部和底部边距均为3em。前两个元素之间的边距为50px，因为顶部边距较小而底部边距较大。第二个元素和第三个元素的边距是3em，因为3em比第二个元素底部的边距20px大。html
