margin重叠现象探讨研究
在网页页面布局中,经常会出现以下两种现象:
1、相邻的两个普通元素,上下边距,不是简单的相加,而是取边距较大者的元素的边距值。如例1
2、关系为父子的两个div元素,竖直方向上如果两个元素都设有margin值,则会取margin值较大的元素的边距值。如例2
例1:
HTML代码:
<div class="bro1">div1</div> <div class="bro2">div2</div>
1. 2.
CSS代码:
<style type="text/css"> .bro1{ height:100px; background: pink; margin-bottom: 50px; } .bro2{ height:100px; background: silver; margin-top:80px; } </style>
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12.
效果图如下:
需要说明的是:若相邻的两个普通兄弟元素,它们的 margin 值是一样的,则两个的 margin 值就各取两个元素 margin 值的一半.
例2:
HTML代码:
<div class="far"> <div class="son"></div> </div>
1. 2. 3.
CSS代码:
<style type="text/css"> .far{ height:200px; background: green; margin-top:80px; } .son{ height:100px; background: blue; margin-top: 50px; } </style>
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12.
效果图如下: