<html><head><style type="text/css"> #a{width:100px;height:50px;background:red;margin-bottom:20px;}#b{width:100px;height:50px;background:green} </style> <head><body> <div id="a"></div><div id="b"></div> </body></html>
a層的下外邊距是20px
下面看圖
下面把綠色的層上外邊距改為10px
<html><head><style type="text/css"> #a{width:100px;height:50px;background:red;margin-bottom:20px;}#b{width:100px;height:50px;background:green;margin-top:10px;} </style> <head><body> <div id="a"></div><div id="b"></div> </body></html>
沒任何區別
簡單地說，外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并後的外邊距的高度等於兩個發生合并的外邊距的高度中的較大者。
在看圖
如果兩者一樣的px怎麼辦？假如都是20px
<html><head><style type="text/css"> #a{width:100px;height:50px;background:red;margin-bottom:20px;}#b{width:100px;height:50px;background:green;margin-top:20px;} </style> <head><body> <div id="a"></div><div id="b"></div> </body></html>
效果還是一樣哦
下面測試一下
<html><head><style type="text/css"> #a{width:100px;height:100px;background:red;margin-top:20px;}#b{width:50px;height:50px;background:green;margin-top:10px;} </style> <head><body> <div id="a"><div id="b"></div></div> </body></html>
ie6的顯示
Firefox的顯示
可以看出ie6是不合并的，Firefox的合并的
可能有人會好奇
這個為什麼紅色沒有貼緊上面的瀏覽框
其實沒有瀏覽器都有預設的內外邊距的
只需要
<html><head><style type="text/css"> *{margin:0;padding:0;} #a{width:100px;height:50px;background:red;margin-bottom:20px;}#b{width:100px;height:50px;background:green;margin-top:10px;} </style> <head><body> <div id="a"></div><div id="b"></div> </body></html>
看
有些瀏覽器可能要用
body{margin:0;padding:0;}
以上就是div+css網頁布局設計新開端（5）的內容，更多相關內容請關注topic.alibabacloud.com（www.php.cn）！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
