margin设置两个标签边框之间的距离,但是会有两种现象:
1、margin外边距的合并现象
如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top,那么两个margin会发生合并现象,合并以后取值较大的那个
.one {
width: 200px;
height: 100px;
background: red;
margin-bottom: 30px;
}
.two {
width: 200px;
height: 100px;
background: green;
margin-top: 50px;
}
可以发现两个盒子的距离为50px,div1的margin还是30px,但是div2的margin更大,所以浏览器在渲染的时候选择较大的margin值。
2、Margin塌陷现象
如果一个大盒子中包含一个小盒子,给小盒子设置margin-top,大盒子会跟小盒子一起向下平移。
* {
margin: 0;
padding: 0;
}
.one {
width: 200px;
height: 200px;
background: red;
}
.two {
width: 150px;
height: 150px;
background: green;
margin-top: 40px;
}
解决方法margin塌陷的办法由两种:
1、给大盒子设置边框
border:1px solid#000;
2、给大盒子设置overflow:hidden
overflow:hidden;