css的外邊距合併（如何實現不合並）
阿新 • • 發佈：2019-01-03
如何實現外邊框不合並呢？我總結了幾個知乎大神和老師上課說的辦法：
1.可以只設置下邊距或者上邊距：
2。 讓父級元素觸發 BFC，就能使父級 margin 和當前元素的 margin 不重疊。<!DOCTYPE > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>不合並</title> <style> *{margin:0;padding: 0;} .first, .second, .third{height:100px;width:500px;padding: 20px;margin-bottom: 20px;} .first{ background:#ccc;} .second{ background:#FCC;} .third{ background:#9CF;} </style> </head> <body> <div class="first">first</div> <div class="second">second</div> <div class="third">third</div> </body>
可以看到第一和第二之間沒有發生合併，而第二第三之間合併了。<!DOCTYPE html PUBLIC > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>不合並</title> <style> *{margin:0;padding: 0;} .first, .second, .third{height:100px;width:500px;padding: 20px;margin: 20px;} .container{ overflow: hidden; } .first{ background:#ccc;} .second{ background:#FCC;} .third{ background:#9CF;} </style> </head> <body> <div class="container"> <div class="first">first</div> </div> <div class="container"> <div class="second">second</div> </div> <div class="third">third</div> </body>
3.border的設定：
<!DOCTYPE html PUBLIC > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>不合並</title> <style> *{margin:0;padding: 0;} .first, .second, .third{height:100px;width:500px;padding: 20px;margin: 20px;border: 10px solid #fff;} .container{ overflow: hidden; } .first{ background:#ccc;} .second{ background:#FCC;} .third{ background:#9CF;} </style> </head> <body> <div class="first">first</div> <div class="second">second</div> <div class="third">third</div> </body>
這三方法其實都是讓兩個元素不再相鄰，就可以避免合併的情況出現。
----------------------------------------------------------
2016/3/22修改
今天又不小心看到一篇總結的很好的博文。實在汗顏。
附地址：http://www.hujuntao.com/web/css/css-margin-overlap.html
說的很全面了，可以參考
----------------------------------------------------------------------