css-margin折叠现象：合并和塌陷

CSS-margin的折叠现象：合并和塌陷

一、合并现象，也可成为兄弟元素的外边距合并

• 现象描述：

  垂直布局的块级元素，它们的垂直方向的margin会合并，最后两者的距离为margin的较大值

  p {
  	width: 100px;
  	height: 100px;
  }
  .pink {
  	background: pink;
  	margin-bottom: 100px;
  }
  .orange {
  	background: orange;
  	margin-top: 100px;
  }
  

明显可以看到，他们两者的距离不是200px，而是100px

解决办法：只给其中一个盒子设置margin

二、塌陷现象：也称为父子元素的外边距塌陷

• 现象描述：

  互相嵌套的块级元素，如果子元素设置margin-top，会同时作用到父元素上，导致父元素随子元素一起往下移动

• 现象解释：

  父元素的上边距和子元素的上边距紧挨在一起，浏览器认为子元素的margin-top和父元素的margin-top是重叠的，没有border和padding这些第三者的距离进行隔开

  			.father {
  				width: 300px;
  				height: 300px;
  				background: pink;
  			}
  			.son {
  				width: 100px;
  				height: 100px;
  				background: blue;
  				margin-top: 50px;
  			}
  

解决办法：

• 给父元素设置border-top或者padding-top，从而分隔父子元素的margin-top，不要紧挨在一起

• 给父元素开启BFC，（具体为：设置overflow:hidden，设置display:inline-block，设置float:left等）

  			.father {
  				width: 300px;
  				height: 300px;
  				background: pink;
  				overflow: hidden;
  			}