030_CSS外边距合并
1. 外邊距合并指的是, 當兩個垂直外邊距相遇時, 它們將形成一個外邊距。
2. 合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。
3. 外邊距合并
3.1. 外邊距合并(疊加)是一個相當簡單的概念。但是, 在實踐中對網(wǎng)頁進行布局時, 它會造成許多混淆。
3.2. 簡單地說, 外邊距合并指的是, 當兩個垂直外邊距相遇時, 它們將形成一個外邊距。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。
3.3. 當一個元素出現(xiàn)在另一個元素上面時, 第一個元素的下外邊距與第二個元素的上外邊距會發(fā)生合并。請看下圖:
3.3.1. 代碼
<!DOCTYPE html> <html><head><title>CSS上下元素外邊距合并</title><meta charset="utf-8" /><style type="text/css">body {margin: 0;padding: 0;}div {width: 100px;height: 100px;}#d1 {background-color: red;margin-bottom: 20px;}#d2 {background-color: blue;margin-top: 50px;}</style></head><body><div id="d1"></div> <div id="d2"></div><p>當一個元素出現(xiàn)在另一個元素上面時, 第一個元素的下外邊距與第二個元素的上外邊距會發(fā)生合并。 <br />請注意, 兩個div之間的外邊距是50px, 而不是70px(20px + 50px)。</p></body> </html>3.3.2. 效果圖
3.4. 當一個元素包含在另一個元素中時, 如果外層元素和內(nèi)層元素之間沒有別的元素或文本, 它們的上和下外邊距也會發(fā)生合并。請看下圖:
3.4.1. 代碼
<!DOCTYPE html> <html><head><title>CSS包含元素外邊距合并</title><meta charset="utf-8" /><style type="text/css">body {margin: 0;padding: 0;}#d1 {width: 200px;height: 200px;background-color: red;margin-top: 20px;}#d2 {width: 100px;height: 100px;background-color: blue;margin-top: 50px;}#d3 {width: 200px;height: 200px;background-color: red;}#d4 {width: 100px;height: 100px;background-color: blue;margin-top: 50px;}</style></head><body><div id="d1"><div id="d2"></div></div><div id="d3"><div id="d4"></div></div><p>當一個元素包含在另一個元素中時, 如果外層元素和內(nèi)層元素之間沒有別的元素或文本, 它們的上和下外邊距也會發(fā)生合并。</p></body> </html>3.4.2. 效果圖
3.5. 假設有一個空元素, 它有外邊距, 但是沒有邊框或內(nèi)邊距或填充。在這種情況下, 上外邊距與下外邊距就碰到了一起, 它們會發(fā)生合并。請看下圖:
3.5.1. 代碼
<!DOCTYPE html> <html><head><title>CSS空元素自身外邊距合并</title><meta charset="utf-8" /><style type="text/css">body {margin: 0;padding: 0;background-color: red;}#d1 {margin-top: 20px;margin-bottom: 50px;}#d2 {width: 100px;height: 100px;background-color: blue;}</style></head><body><div id="d1"></div><div id="d2"></div><p>假設有一個空元素, 它有外邊距, 但是沒有邊框或內(nèi)邊距或填充。在這種情況下, 上外邊距與下外邊距就碰到了一起, 它們會發(fā)生合并。</p></body> </html>3.5.2. 效果圖
3.6. 如果這個外邊距遇到另一個元素的外邊距, 它還會發(fā)生合并。請看下圖:
3.6.1. 代碼
<!DOCTYPE html> <html><head><title>CSS多級元素外邊距合并</title><meta charset="utf-8" /><style type="text/css">body {margin: 0;padding: 0;background-color: red;}#d1 {margin-top: 20px;margin-bottom: 50px;}#d2 {width: 100px;height: 100px;margin-top: 70px;background-color: blue;}</style></head><body><div id="d1"></div><div id="d2"></div></body> </html>3.6.2. 效果圖
4. 外邊距合并初看上去可能有點奇怪, 但是實際上, 它是有意義的。以由幾個段落組成的典型文本頁面為例。第一個段落上面的空間等于段落的上外邊距。如果沒有外邊距合并, 后續(xù)所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味著段落之間的空間是頁面頂部的兩倍。如果發(fā)生外邊距合并, 段落之間的上外邊距和下外邊距就合并在一起, 這樣各處的距離就一致了。
4.1. 代碼
<!DOCTYPE html> <html><head><title>CSS合并段落外邊距</title><meta charset="utf-8" /><style type="text/css">body, hr {margin: 0;padding: 0;}p {width: 600px;background-color: orange;}</style></head><body><p>外邊距合并初看上去可能有點奇怪，但是實際上，它是有意義的。以由幾個段落組成的典型文本頁面為例。</p> <p>第一個段落上面的空間等于段落的上外邊距。如果沒有外邊距合并，后續(xù)所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味著段落之間的空間是頁面頂部的兩倍。</p><hr/><p>如果發(fā)生外邊距合并，段落之間的上外邊距和下外邊距就合并在一起，這樣各處的距離就一致了。</p></body> </html>4.2. 效果圖
5. 只有普通文檔流中塊框的垂直外邊距才會發(fā)生外邊距合并。行內(nèi)框、浮動框或絕對定位之間的外邊距不會合并。
總結
以上是生活随笔為你收集整理的030_CSS外边距合并的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 028_CSS外边距
- 下一篇： 032_CSS定位