css中相鄰元素的margin其實是會自動合併的，且取較大值。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <style> .div1 { width: 60px; height ...
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了！
