css如何注意外边距折叠

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

注意外边距折叠

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

HTML

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如何注意外边距折叠"这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注行业资讯频道！