margin屬性
margin是盒子的外邊距，是盒子和其他盒子之間的距離。
margin也有四個方向。
以margin開頭，接著跟一個小短橫，然後跟表示方向的單詞，就是margin的四個方向的小屬性。
margin的塌陷
所謂的margin的塌陷，就是豎直方向的margin，有塌陷現象。
這個現象是：小的margin會塌陷到大的margin中，而margin不疊加，以大值為準。
比如下圖：
上面的盒子，把下面的盒子向下"踹"了30像素，下面的盒子，把上面的盒子向上"踹"了40像素。而最終在頁面上顯示的時候，這兩個盒子之間的距離是40像素，而並不是70像素。這就是margin的塌陷現象。
而margin在水平方向並不具有塌陷現象，是可以疊加的。
接下來，我創建一個叫"margin屬性詳解.html"的文件，在vscode和瀏覽器中進行演示。
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="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><spanclass="span1">欲為諸佛龍象</span><spanclass="span2">先做眾生牛馬</span><divclass="box1"></div><divclass="box2"></div></body></html>
我創建了兩個span標籤和兩個div標籤。
span標籤是行內元素，可以並排顯示，div標籤是塊級元素，不能並排顯示。
關於行內元素和塊級元素，後面會介紹。這裡先知道就行。
兩個span標籤，我設置了左右方向的margin，兩個div標籤，我設置了豎直方向的margin。
在瀏覽器中，效果如下：
現在我在頁面的span上右鍵點擊"檢查"，打開瀏覽器調試窗口，把滑鼠滑到代碼區域的span1上，用肉眼就能很明顯的看到，頁面渲染區域的span1和span2之間的水平方向距離，肯定是超過10像素的，也就是說在水平方向上，margin不塌陷，會疊加。它們之間的距離是10+20=30像素。
我把滑鼠滑到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><htmllang="en"><head><metacharset="UTF-8"><metaname="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><spanclass="span1">欲為諸佛龍象</span><spanclass="span2">先做眾生牛馬</span><divclass="box1"></div><divclass="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上，會看到頁面的顯示區域，body默認就有上下左右方向的margin，
再看看body的盒子模型圖，就能看到body上下左右四個方向，默認的margin是8像素，
同樣的，我們點擊代碼中的ul，把滑鼠懸停到ul上，會看到ul的盒子模型圖上，顯示ul默認具有上下方向的margin是16像素，左右方向margin為0，
ul的盒子模型圖如下，
同樣的，在代碼區點擊p，滑鼠停在p上，就能看到p元素也有默認上下方向的margin，
p元素的盒子模型圖上，上下方向margin為16像素，左右沒有，如下：
一些元素具有默認的margin，也有默認的padding，我們都可以通過盒子模型圖來看到。
現在，我們為了頁面更精準，就要去掉這些元素默認的margin和padding，在css中加上去掉這些元素默認margin和padding的代碼：
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="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><spanclass="span1">欲為諸佛龍象</span><spanclass="span2">先做眾生牛馬</span><divclass="box1"></div><divclass="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，和盒子的水平居中不是一個概念。
盒子的垂直方向居中，需要使用絕對定位技術。絕對定位，後面我們會接觸到。