欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

margin的塌陷现象

发布时间：2025/5/22 编程问答 41 豆豆
生活随笔 收集整理的这篇文章主要介绍了 margin的塌陷现象 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

1、标准文档流中，margin不叠加，以较大的为准。

案例代码如下：

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>margin的塌陷现象</title> 5 <style type="text/css"> 6 .div1{ 7 width: 100px; 8 height: 100px; 9 background-color: red; 10 margin-bottom: 10px; 11 } 12 .div2{ 13 width: 100px; 14 height: 100px; 15 background-color: yellow; 16 margin-top: 30px; 17 } 18 </style> 19 </head> 20 <body> 21 <div class="div1"></div> 22 <div class="div2"></div> 23 </body> 24 </html>

效果如下：

2、如果对两个盒子都设置了浮动属性，并且他们都位于水平位置。margin会叠加：

代码如下：

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>margin的塌陷现象</title> 5 <style type="text/css"> 6 .div1{ 7 width: 100px; 8 height: 100px; 9 background-color: red; 10 float: left; 11 margin-right: 10px; 12 } 13 .div2{ 14 width: 100px; 15 height: 100px; 16 background-color: yellow; 17 float: left; 18 margin-left: 30px; 19 } 20 </style> 21 </head> 22 <body> 23 <div class="div1"></div> 24 <div class="div2"></div> 25 </body> 26 </html>

效果图如下：

如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷问题的。

转载于:https://www.cnblogs.com/myunYao/p/8952224.html

总结

以上是生活随笔为你收集整理的margin的塌陷现象的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。