css中相邻元素的margin其实是会自动合并的，且取较大值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <style> .div1 { width: 60px; height: 60px; background-color: #fdd; border: 10px solid #fee; padding: 20px; margin: 30px; /*设置上下margin为30px*/ } .div2 { width: 60px; height: 60px; background-color: #fdd; border: 10px solid #fee; padding: 20px; margin: 60px 30px; /*设置上下margin为60px*/ } </style> </head> <body> <div class="div1"></div> <div class="div2"></div> </body> </html>
实际效果：div1和div2上下相距60px，而不是90px。
那float的坑是什么啦？
那就是float会取消相邻元素margin的自动合并！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <style> div { width: 60px; height: 60px; background-color: #fdd; border: 10px solid #fee; padding: 20px; margin: 30px; float: left; /*设置左浮动*/ } </style> </head> <body> <div></div> <div></div> </body> </html>
效果如下：两个div左右相距60px，而不是30px了！
