關於元素設置margin-top可以改變body位置的緣由及解決（子元素設置margin-top改變父元素定位）

關於元素設置margin-top可以改變body位置的緣由及解決（子元素設置margin-top改變父元素定位）

原由：在進行bootstrap的.navbar-brand內文字設置垂直居中時採用line-height=高度，沒法居中，發現源碼.navbar-brand 設置了 padding: 15px 15px;（默認導航高度爲50），因而居中應該是等於高度-30，解決過程當中寫了幾個div用於檢測問題，結果遇到了如下問題，通過數小時的研究（時間大多花費在百度與谷歌上，以及研究緣由上），因而寫下這篇文章作個總結，加深我的記憶。

 

我寫了兩個div，從上往下分別標記爲div1和div2，設置了相同的margin與高寬，而後給div1設置左浮動。那麼根據我薄弱的基礎判斷，這時候刷新頁面應該出現的是兩個div重疊在一塊兒，只顯示一個div，可是結果出現了誤差，兩個div並無疊加顯示，而且div1出如今了div2下方。

（F5後的顯示）

預期的結果並無出現，而後開始排查寫的代碼，發現問題出如今margin上，清除div的maring後元素顯示正常，不會出現錯位。

（清除了margin以後的正常狀態）

因爲margin-left是正常的，因此顯然是margin-top的設置出現了些問題，因而推理查找問題，n分鐘後得出以下結論

正常文檔流狀態下，div1浮動，脫離了文檔流，而後div2這時候依舊處在文檔流狀態，因而向上移動至div1浮動前的位置，這時候body的位置發生改變，向下移動了div2設置的margin-top的距離，（又一個問題出現了，爲何div2設置的margin可以改變body的位置，或者說是父元素的位置！好吧，這個問題通過百度與測試後發現是個固有問題，在文章末尾作詳細說明）。

（藍色部分是body）

而div1這時候處於浮動狀態，因爲一樣設置了margin，因此浮動後一樣會改變位置，div1浮動後根據body的位置從新進行定位，因此div1浮動後，兩個div的位置不會重合。（解決方法-給body添加padding-top，或者border——詳情見結尾。）

（能夠很明顯看出div2根據body進行了margin定位）

 

 

兩個div的css以下：

 1 div:nth-child(1){
 2 float: left;
 3 margin: 50px;
 4 width: 200px;
 5 height: 200px;
 6 border: 10px solid #000;
 7 }

 8 div:nth-child(2){
 9 margin:50px;
10 width: 200px;
11 height: 200px;
12 border: 10px solid #000;
13 }

 

 

 

關於子元素的margin-top會改變父級元素的位置，（也就是div2的margin-top改變了body位置），如下。

 

這個問題發生的緣由是根據規範，一個盒子若是沒有上補白(padding-top)和上邊框(border-top)，那麼這個盒子的上邊距會和其內部文檔流中的第一個子元素的上邊距重疊。

 

再說了白點就是：父元素的第一個子元素的上邊距margin-top若是碰不到有效的border或者padding.就會不斷一層一層的找本身 「領導」(父元素，祖先元素)的麻煩。只要給領導設置個有效的 border或者padding就能夠有效的管制這個目無領導的margin防止它越級，假傳聖旨，把本身的margin當領導的margin執行。 對於垂直外邊距合併的解決方案上面已經解釋了，爲父元素例子中的middle元素增長一個border-top或者padding-top便可解決這個問題。