代码改变世界

margin发生合并

2016-08-20 15:15  沧海哥哥  阅读(196)  评论(0)  编辑  收藏  举报

某些相邻的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发生折叠；