品易云推流 关闭
文章 > css教程 > css中margin边距折叠的解决

css中margin边距折叠的解决

css

头像

小妮浅浅

2021-04-23 14:59:52789浏览 · 0收藏 · 0评论

1、使用说明

如果两种垂直元素都有margin,而其中一种元素的margin大于另一种元素,则会产生边距折叠。这样的话,就会使用更大的margin,而另一种则会被忽略。

在模型中,一个元素是margin-bottom,另一个元素是margin-top,边缘较大的元素获胜。

2、解决方法

.element:not(:last-child) {
  margin-bottom: 1rem;
}

使用:not CSS选择器可以轻松删除最后一个子元素的边距,避免不必要的间距。

以上就是css中margin边距折叠的解决,希望对大家有所帮助。更多css学习指路:css教程

关注公众号

关注公众号,随时随地在线学习

本教程部分素材来源于网络,版权问题联系站长!

底部广告图 底部广告图按钮