元素的外边距margin重叠问题
2016-11-28 本文已影响0人
行不离书
第一种 ——经典的相邻marign重叠的问题
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
边距重叠计算方式
a、全部都为正值，取最大者；
b、不全是正值，则都取绝对值，然后用正值减去最大值；
c、没有正值，则都取绝对值，然后用0减去最大值。
<style>
*{
margin:0;
padding: 0;
}
.divout{
width: 100px;
height: 100px;
background: yellow;
margin-bottom: 50px;
border: 1px solid black;
}
.divout1{
width:50px;
height: 50px;
background: yellow;
margin-top: 80px;
/*float:left;*/
/*position:absolute;*/
border: 1px solid black;
}
</style>
<body>
<div class="divout">
</div>
<div class="divout1">
</div>
</body>
边距重叠.png
解决办法：
1、 将元素设置为浮动 float:left;
2、 在设置margin-top/bottom值时统一设置上或下
3、 元素的position的值为absolute/fixed
第二种 ——元素和父元素margin值问题
父元素无 border、padding、inline content 、 clearance时，子元素的margin-top/bottom会与父元素的margin产生重叠问题。
<style>
*{
margin:0;
padding: 0;
color: black;
}
#parrent{
width:300px;
height:150px;
margin-top: 20px;
background:teal;
}
#box1{
width:100px;
height:100px;
background:aqua;
margin:100px 0;
}
</style>
<body>
<div id="parrent">
<div id="box1">
我是box1
</div>
我是内容
</div>
</body>
子元素没设置margin值.png
子元素设置margin值.png
解决办法
1、外层元素padding代替
2、内层元素透明边框 border:1px solid transparent;
3、内层元素绝对定位 postion:absolute:
4、外层元素 overflow:hidden;
5、内层元素 加float:left;或display:inline-block;
6、内层元素padding:1px;
7、外层元素有边框
8、内层元素不是第一个元素；
注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
