一、外边距的塌陷解决办法
注意:塌陷
两个嵌套的元素,第一个子元素的margin-top 会和父元素的margin-top(父元素没有设置上边框和 内间距)
1、 给父元素设置上边框 或者设置内间距 (不推荐)
2、 给父元素 添加 overflow:hidden;
#fater{
width:400px;
height:399px;
background-color:#000;
padding-top:1px;
/*没有padding-top的话下面的margin-top不会生效*/
/*
解决方法1
padding-top:1px 换成 border-top:1px solid #000 颜色和背景颜色一样 方块height-1
解决方法2
直接在fater里面使用padding-top属性
解决方法3
给父div增加overflow:hidden
直接解决问题
*/
}
#son{
width:200px;
height:200px;
background-color:#0f0;
margin-top:50px;
}
<div id="fater">
<div id="son"></div>
</div>
外边距的合并解决方法
div {
width: 200px;
height: 200px;
background-color: aquamarine;
}
#div1 {
margin-bottom: 100px;
/*
100px无效
取下面最大的margin200px
*/
}
#div2 {
margin-top: 200px;
}
/*
解决方法1:
两个盒子的外边距真实距离,是两个margin中最大的那个
不要给两个盒子同时设置margin
把两个的值设置到一个盒子上面
解决方法2:
给元素添加一个父元素 并设置 overflow:hidden;
*/
<div id="div1"></div>
<div id="div2"></div>