css如何注意外边距折叠

css如何注意外边距折叠

这篇文章主要介绍css如何注意外边距折叠，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

注意外边距折叠

与其他大多数属性不同，上下的垂直外边距margin在同时存在时会发生外边距折叠。这意味着当一个元素的下边缘接触到另一个元素的上边缘时，只会保留两个margin值中较大的那个。例如：

HTML

<divclass="squarered"></div><divclass="squareblue"></div>

CSS

.square{width:80px;height:80px;}.red{background-color:#F44336;margin-bottom:40px;}.blue{background-color:#2196F3;margin-top:30px;}

红色方块与蓝色方块的上下间距是40px，而不是70px。解决外边距折叠的方法有很多种，对于初学者来说最简单的就是所有元素只使用一个方向上的margin，比如上下的外边距我们统统使用margin-bottom。

以上是“css如何注意外边距折叠”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注恰卡编程网行业资讯频道！