某些相邻的margin会发生合并，我们称之为margin折叠
来看例子：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <style type="text/css">
6 h2{margin:10px 0;background-color: #0f0;}
7 div{margin:20px 0;background-color: #00f;height: 50px;border:1px solid #aaa;}
8 </style>
9 </head>
10 <body>
11 <!-- 情景一 -->
12 <h2>这是一个标题</h2>
13 <div>
14 <h2>这是又一个标题</h2>
15 </div>
16 <!-- 本例中，第一个h2的margin-bottom（10px），div的margin-top（20px），第二个h2的margin-top（10px）将被合并，它们之间的margin间隙最后是（20px），即取三者之间最大的那个值。 -->
17
18 <!-- 情景二 -->
19 <h2>这是一个标题</h2>
20 <div>
21 <h2>这是又一个标题</h2>
22 </div>
23 <!-- 本例中，第一个h2的margin-bottom（10px），div的margin-top（20px）将被合并，但第二个h2的margin-top不与它们合并，因为它被border分隔，不与它们相邻。 -->
24 </body>
25 </html>
显示效果：
margin折叠常规认知：
margin折叠只发生在块级元素上；
浮动元素的margin不与任何margin发生折叠；
设置了属性overflow且值不为visible的块级元素，将不与它的子元素发生margin折叠；
绝对定位元素的margin不与任何margin发生折叠；
根元素的margin不与其它任何margin发生折叠；
时间： 2024-08-02 11:37:10