css中的margin是指,CSS中margin的两种现象

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;

}

div1

div2

可以发现两个盒子的距离为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;