首页 > 其他 > 详细

margin发生合并

时间:2016-08-20 16:18:12      阅读:223      评论:0      收藏: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发生折叠;

margin发生合并

原文:http://www.cnblogs.com/canghaigg/p/5790496.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!