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;
  			}