css竖向合并 margin

最新推荐文章于 2025-01-03 11:47:35 发布

原创最新推荐文章于 2025-01-03 11:47:35 发布 · 557 阅读

0 ·

CC 4.0 BY-SA版权

html 专栏收录该内容

40 篇文章

订阅专栏

本文探讨了CSS中竖向margin折叠的问题，并提供了解决方案。通过调整内联块级元素的显示方式，可以有效避免margin折叠现象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近一直在切图，做静态页，做了两个专题以后才发现一个问题，就是竖向的margin 会合并，取最大的显示。如下

<div style='margin-top:5px;' class='farter'>
     <div style='margin-top:15px;' class='chd'>
        
     </div>
</div>

如果你这么写，class为farter的div本应该是距离上一个div应该有5像素；而class为chd的div本应该距离class的farter div上边距距离15像素。结果却是这两个div上边距重合，而同时距离class为farter的div距离其上一个div应该有15像素.出现这种状况怎么弄呢？

如下：

<div style='margin-top:5px;' class='farter'>
     <div style='margin-top:15px;   display:inline-block;*display:inline; zoom:1;' class='chd'>
        
     </div>
</div>


给最后一个元素加上display:inline-block;但是IE6和IE7下不完全支持display:inline-block，所以要加上*display:inline;zoom:1即可解决IE6、7的bug;