1.上下/左右相鄰的普通元素margin，不是兩者相加之和，而是取最大值，這個現象叫做margin重疊。
2. 普通元素才會發生margin重疊，如果是float元素，就不會發生。margin是兩者相加之和。
例如：1普通元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>練習(margin重疊現象）</title> <style> #test1{ height: 100px; background: blue; margin-bottom: 50px; } #test2{ height: 100px; background: green; margin-top:50px; } </style> </head> <body> <div id="test1"></div> <div id="test2"></div> </body> </html>
2，浮動元素：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>練習(margin重疊現象）</title> <style> #test1{ height: 100px; width: 200px; background: blue; margin-bottom: 50px; float: left; } #test2{ height: 100px; width: 200px; background: green; float: left; clear: left; margin-top:50px; } </style> </head> <body> <div id="test1"></div> <div id="test2"></div> </body> </html>
3,父子（普通元素）發生margin重疊現象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>練習(margin重疊現象）</title> <style> #test1{ height: 150px; width: 200px; background: blue; } #test2{ height: 50px; width: 50px; background: green; margin-bottom:50px; } #test3{ height: 50px; width: 50px; background: green; margin-top: 50px; } </style> </head> <body> <div id="test1"> <div id="test2"></div> <div id="test3"></div> </div> </body> </html>
4，父子（子為浮動元素）不發生margin重疊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>練習(margin重疊現象）</title> <style> #test1{ height: 150px; width: 200px; background: blue; } #test2{ height: 50px; width: 50px; background: green; float: left; margin-bottom:50px; } #test3{ height: 50px; width: 50px; background: green; float: left; clear: left; margin-top: 50px; } </style> </head> <body> <div id="test1"> <div id="test2"></div> <div id="test3"></div> </div> </body> </html>
