外边距叠加问题小结

当两个或更多外边距相遇时，他们将形成一个外边距。这个外边距高度等于两个发生层叠的外边距的高度中的较大者。

1.当一个元素出现在另一个元素上面时，第一个元素的底外边距和第二个元素的定外边距发生叠加。

效果图：

代码：

1 <style>
2     .p2{margin-top: 1.5em;}
3 </style>
4 <body>
5     <p class="p1">p1</p>
6     <p class="p2">p2</p>
7 </body>

其实默认的p的margin每个用户代理都不一样（chrome是1em），我把第二个段落的margin-top改成了1.5em，可以看出图片中p1的下边距和p2的上边距重叠，并且取p2的上边距作为他们的公共边距。

2.当一个元素包含在另外一个元素中时（假设没有内边距或边框将外边距分开），他们的顶和底外边距也会发生叠加。

效果图：

代码：

1 <style>
2    p{ padding: 0;}
3    .p2{margin-top: 25px;}
4    span{ margin: 10px; display: block; padding: 0;}
5 </style>
6 <p class="p2">
7    <span>我是p中的span</span>
8 </p>

上面的例子中，p的外上边距和span的外上边距合并，前提是span也是display:block; 

3.外边距可以与本身发生叠加。如果是一个空元素，有外边距，没有边框和内边距，顶外边距和底外边距发生叠加。

效果图：

代码：

1 <style>
2 body{ margin: 0; padding: 0;}
3 p{ padding: 0; margin: 20px 0;}
4 .p2{margin-top: 25px;}
5 span{ margin: 10px; display: block; padding: 0;}
6 </style>
7 <p></p>
8 <div>11</div>

如图所示,11上面就只有20像素。

margin叠加的应用：几个段落一起布局，第一个段落上面的顶外边距正常显示，底外边距和第二个段落的顶外边距重叠。

注意：只有普通文档流中的块框的垂直外边距才会发生外边距叠加。行内框，浮动框，绝对定位框之间的外边距都是不会叠加的。

 

posted @ 2013-04-28 12:24  snowinmay  阅读(1234)  评论(0)  编辑  收藏  举报