外边距叠加问题小结
当两个或更多外边距相遇时,他们将形成一个外边距。这个外边距高度等于两个发生层叠的外边距的高度中的较大者。
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叠加的应用:几个段落一起布局,第一个段落上面的顶外边距正常显示,底外边距和第二个段落的顶外边距重叠。
注意:只有普通文档流中的块框的垂直外边距才会发生外边距叠加。行内框,浮动框,绝对定位框之间的外边距都是不会叠加的。
学透前端行业所有技术,玩遍北京周边所有城市。然后我会回到那个生我养我的地方,因为有亲人的地方才是家。