margin屬性
margin是盒子的外邊距，是盒子和其他盒子之間的距離。
margin也有四個方向。
以margin開頭，接著跟一個小短橫，然後跟表示方向的單詞，就是margin的四個方向的小屬性。
margin的塌陷
所謂的margin的塌陷，就是豎直方向的margin，有塌陷現象。
這個現象是：小的margin會塌陷到大的margin中，而margin不疊加，以大值為準。
比如下圖：
上面的盒子，把下面的盒子向下"踹"了30畫素，下面的盒子，把上面的盒子向上"踹"了40畫素。而最終在頁面上顯示的時候，這兩個盒子之間的距離是40畫素，而並不是70畫素。這就是margin的塌陷現象。
而margin在水平方向並不具有塌陷現象，是可以疊加的。
接下來，我建立一個叫"margin屬性詳解.html"的檔案，在vscode和瀏覽器中進行演示。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>margin屬性詳解</title> <style> .span1 { margin-right: 10px; } .span2 { margin-left: 20px; } .box1 { width: 200px; height: 200px; background-color: red; margin-bottom: 10px; } .box2 { width: 200px; height: 200px; background-color:orange; margin-top: 20px; }</style></head><body> <span class="span1">欲為諸佛龍象</span><span class="span2">先做眾生牛馬</span> <div class="box1"></div> <div class="box2"></div></body></html>我建立了兩個span標籤和兩個div標籤。
span標籤是行內元素，可以並排顯示，div標籤是塊級元素，不能並排顯示。
關於行內元素和塊級元素，後面會介紹。這裡先知道就行。
兩個span標籤，我設定了左右方向的margin，兩個div標籤，我設定了豎直方向的margin。
在瀏覽器中，效果如下：
我把滑鼠滑到box2上，就能看到box2和box1之間豎直方向的距離就是20畫素，取的是20這個大值，而不是進行疊加。也就是說，在豎直方向上，是有margin塌陷現象的。
一些元素有預設的margin
一些元素，比如body、ul、p等標籤，在我們什麼樣式都沒有給它們設定的時候，瀏覽器就會給它們設定預設的margin，這些預設的margin，會影響我們開發精準的網頁。
因此，在我們開始編寫一個網頁的時候，就要把這些具有預設margin的元素的預設margin清除掉。
如何清除呢？可以這樣寫：
這裡的*號，是萬用字元選擇器。萬用字元選擇器表示選擇頁面上所有的元素。
同樣的，一些元素也具有預設的padding，所以我們一開始，就把所有的元素的margin和padding都設為0。
但是萬用字元選擇器有效率問題(並不是所有的元素都有預設的margin和padding，只是一部分)，所以我們使用並集選擇器，把經常要用到的元素設定一下就行了。
關於一些元素具有預設的margin和padding，我在瀏覽器中演示一下。我還是在"margin屬性詳解.html"這個檔案中，寫一個ul，再寫一個p。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>margin屬性詳解</title> <style> .span1 { margin-right: 10px; } .span2 { margin-left: 20px; } .box1 { width: 200px; height: 200px; background-color: red; margin-bottom: 10px; } .box2 { width: 200px; height: 200px; background-color:orange; margin-top: 20px; }</style></head><body> <span class="span1">欲為諸佛龍象</span><span class="span2">先做眾生牛馬</span> <div class="box1"></div> <div class="box2"></div> <ul> <li>他是平原跑出來的第一輪太陽</li> <li>閉著眼都能感覺到陽光</li> <li>我被燃燒過勁氧化發黃</li> <li>枯燥風化</li> <li>且時光還長</li> </ul> <p>任何瞬間的心動都不容易，不要怠慢了它。</p></body></html>在瀏覽器中，效果如下：
我們看到，我在程式碼中只是新添加了一個ul，一個p，並沒有給body、ul、p設定margin，span標籤只設置了左右方向的margin，並沒有設定上下方向的margin，但是在瀏覽器中，"欲為諸佛龍象先做眾生牛馬"所在的span和瀏覽器的視窗上邊框之間是有一定的縫隙的。
由此，我們就能看出，body和瀏覽器上邊框有一個向上的margin，我們並沒有給body設定margin，那麼就說明body具有預設的margin。
根據程式碼，第二個div，我們並沒有設定下margin，但是ul和第二個div，以及下面的p之間，都有距離，這就說明ul和p標籤都具有預設的margin。
再看看body的盒子模型圖，就能看到body上下左右四個方向，預設的margin是8畫素，
ul的盒子模型圖如下，
p元素的盒子模型圖上，上下方向margin為16畫素，左右沒有，如下：
一些元素具有預設的margin，也有預設的padding，我們都可以透過盒子模型圖來看到。
現在，我們為了頁面更精準，就要去掉這些元素預設的margin和padding，在css中加上去掉這些元素預設margin和padding的程式碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>margin屬性詳解</title> <style> .span1 { margin-right: 10px; } .span2 { margin-left: 20px; } .box1 { width: 200px; height: 200px; background-color: red; margin-bottom: 10px; } .box2 { width: 200px; height: 200px; background-color:orange; margin-top: 20px; } body,ul,p { margin: 0; padding: 0; }</style></head><body> <span class="span1">欲為諸佛龍象</span><span class="span2">先做眾生牛馬</span> <div class="box1"></div> <div class="box2"></div> <ul> <li>他是平原跑出來的第一輪太陽</li> <li>閉著眼都能感覺到陽光</li> <li>我被燃燒過勁氧化發黃</li> <li>枯燥風化</li> <li>且時光還長</li> </ul> <p>任何瞬間的心動都不容易，不要怠慢了它。</p></body></html>現在，瀏覽器中效果就是這樣：
我們看到，body和瀏覽器視窗之間、ul和第二個地之間，ul和最下面的p元素之間，都沒有縫隙了，都是緊貼著的了。這就是去掉他們的預設margin的效果。
實際開發中，去掉元素預設margin和padding的程式碼，我們用交集選擇器去寫，不要用萬用字元去寫，當然自己練習的話，怎麼寫無所謂。
盒子水平居中
一個盒子，預設是位於頁面的最左邊，或者位於父元素的最左邊開會顯示的，怎麼樣才能讓盒子在水平方向上居中呢？
把盒子左右兩邊的margin設定為auto，盒子就在水平方向上居中了。
我們知道，padding寫兩個值的時候，第一個值表示上下方向，第二個值表示左右方向，同樣的，margin也一樣。
margin寫兩個值，第一個值寫為0，就表示上下方向為0，第二個值寫auto，auto就是自動的意思。左右方向自動，它自然就居中了。
因此，想要讓任何一個盒子水平方向居中，就寫margin：0 auto。
注意：文字水平居中是text-align：center，和盒子的水平居中不是一個概念。
盒子的垂直方向居中，需要使用絕對定位技術。絕對定位，後面我們會接觸到。