CSS基礎學習十五：盒子模型補充之外邊距合并 · Web前端HTML+CSS+JS初級入門

今天繼續接著CSS盒子模型補充，[CSS基礎學習十三：盒子模型](http://blog.csdn.net/erlian1992/article/details/49932943)和[CSS基礎學習十四：盒子模型補充之display屬](http://blog.csdn.net/erlian1992/article/details/49950193) [性設置](http://blog.csdn.net/erlian1992/article/details/49950193)都是介紹了盒子模型中的內容概括。開始今天的主題：外邊距合并。外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。 (1)外邊距合并外邊距合并疊加是一個相當簡單的概念。但是，在實踐中對網頁進行布局時，它會造成許多混淆。簡單地說，外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。當一個元素出現在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合并。請看下圖： ![](https://box.kancloud.cn/2016-04-28_57215598e5af9.jpg) 如果看上面的圖還不直觀，我們來舉一個實例： ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS盒子模型外邊距合并</title> <style type="text/css"> * {/*去掉所有的缺省設置*/ margin:0; padding:0; border:0; } #div_1 { width:100px; height:100px; margin-top:20px;/*第一個盒子的上外邊距為20像素*/ margin-bottom:20px;/*第一個盒子的下外邊距為20像素*/ background-color:#FF0000; } #div_2 { width:100px; height:100px; margin-top:10px;/*第二個盒子的上外邊距為10像素*/ background-color:#0000FF; } </style> </head> <body> <div id="div_1"></div> <div id="div_2"></div> <p>請注意，兩個div之間的外邊距是20px，而不是30px(20px+10px)</p> </body> </html> ~~~ 運行的結果為： ![](https://box.kancloud.cn/2016-04-28_5721559905a99.jpg) 注意兩個盒子之間的距離，也就是所謂的margin，確實實現了合并，并且合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。當一個元素包含在另一個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合并。請看下圖： ![](https://box.kancloud.cn/2016-04-28_57215599155e6.jpg) 我們繼續來個實例更直觀看出外邊距合并的結果： ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS盒子模型外邊距合并2</title> <style type="text/css"> * { margin:0; padding:0; border:0; } #outer { width:300px; height:300px; background-color:#FF0000; margin-top:20px;/*外部盒子的上外邊距為20像素*/ } #inner { width:100px; height:100px; background-color:#0000FF; margin-top:10px;/*內部盒子的上外邊距為20像素*/ } </style> </head> <body> <div id="outer"> <div id="inner"></div> </div> <p><b>注釋：</b>請注意，如果不設置div的內邊距和邊框，那么內部div的上外邊距將與外部div的上外邊距(合疊)</p> </body> </html> ~~~ 運行的結果為： ![](https://box.kancloud.cn/2016-04-28_5721559927828.jpg) 注意兩個盒子的上外邊距的像素值，很清楚看出都是20像素，盡管看上去有些奇怪，但是外邊距甚至可以與自身發生合并。假設有一個空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發生合并： ![](https://box.kancloud.cn/2016-04-28_5721559939942.jpg) 這個實例并不好演示，但是在下邊的實例中可以出來，注意看第一個盒子的兩個邊距的合并。如果這個外邊距遇到另一個元素的外邊距，它還會發生合并： ![](https://box.kancloud.cn/2016-04-28_572155994c1f1.jpg) 我們再來一個實例： ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS盒子模型外邊距合并3</title> <style type="text/css"> * { margin:0; border:0; padding:0; } #div_1 { margin-top:20px; margin-bottom:20px; } #div_2 { width:200px; height:200px; background-color:#FFFF00; margin-top:20px; margin-bottom:20px; } </style> </head> <body> <div id="div_1"></div> <div id="div_2"></div> </body> </html> ~~~ 運行的結果為： ![](https://box.kancloud.cn/2016-04-28_572155995ce8f.jpg) 這就是一系列的段落元素占用空間非常小的原因，因為它們的所有外邊距都合并到一起，形成了一個小的外距。外邊距合并初看上去可能有點奇怪，但是實際上，它是有意義的。以由幾個段落組成的典型文本頁面為例。第一個段落上面的空間等于段落的上外邊距。如果沒有外邊距合并，后續所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味著段落之間的空間是頁面頂部的兩倍。如果發生外邊距合并，段落之間的上外邊距和下外邊距就合并在一起，這樣各處的距離就一致了。 ![](https://box.kancloud.cn/2016-04-28_572155996ceb4.jpg) 注釋：只有普通文檔流中塊框的垂直外邊距才會發生外邊距合并。行內框、浮動框或絕對定位之間的外邊距不會合并。 ?