css中相邻元素的margin其实是会自动合并的，且取较大值。
<!doctype html><html lang="en"> <head> <meta chart="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 chart="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了！
本文发布于:2023-04-03 18:44:03，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/8013f2c9c4f6a87d6839195ea4c627e1.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：相邻元素margin的自动合并与float的坑.doc
本文 PDF 下载地址：相邻元素margin的自动合并与float的坑.pdf
| 留言与评论（共有 0 条评论） |
