深刻理解CSS盒模型中的margin

• 外邊距

1. 設置外邊距會在元素外建立額外的「空白」，「空白」一般指不能放其餘元素的區域，並且在這個區域能夠看到父元素的背景，外邊距不會影響盒子的大小，但會影響盒子的位置

margin會影響到盒子實際佔用文檔流的空間

1. 外邊距與行內元素：對於行內非替換元素，上下外邊距不受影響，行高也不受影響。行內替換元素則行高會有變化。負外邊距是使行內替換元素擠入其它行的惟一辦法
2. 負外邊距
3. 四個方向的外邊距解析

❤ margin-top：設置正值，自身元素會向下移動，負值反之

❤ margin-left:設置正值，自身元素會向右移動，負值反之

❤ margin-bottom:設置正值，下邊的元素會向下移動，負值反之

❤ margin-right:默認狀況下不會產生任何效果，右邊有元素效果和margin-bottom相似

元素在頁面中是按照自左向右的順序排列的

1. 深刻理解margin重疊

★屬於同一個BFC的兩個相鄰Box的margin會發生重疊

★垂直外邊距的重疊-相鄰的垂直方向外邊距會發生重疊現象

1)兄弟元素（對開發有利，不須要處理）

兩者都是正值時：兄弟元素的相鄰垂直外邊距會取二者之間的較大值

一正一負時：取兩者的和

都是負值：取兩者絕對值較大的

2)父子元素（必須處理）

子元素會傳遞給外邊距
解決方案一：開啓BFC

\*{ margin: 0; padding:0; }
   #up,#down{ width:200px;
   height:200px; 
   background: #FFC0CB; margin:50px; }

\*{ margin: 0; padding:0; } #wrap{ width: 300px; height: 300px; background: #FF1493; margin: 50px; } #down{ width: 150px; height: 150px; background: #FFC0CB; margin:50px; }

解決方案二：利用clearfix類

Document .box1{ width: 300px; height: 300px; background-color: #008000; }
    .box2{ width: 100px; height: 100px; background-color:deepskyblue; margin-top:200px ; } /\* 
    .box1::before{ content: ''; display: table; }
    .clearfix::before{ content:'' ; display: table; }