父子元素margin传递

怼烎@ 2022-09-09 02:27 179阅读 0赞
  • margin-top传递

如果块级元素的顶部线和父元素的顶部线重叠,那么这个块级元素的margin-top值会传递给父元素

  • margin-bottom传递

如果块级元素的底部线和父元素的底部线重叠,并且父元素的高度是auto,那么这个块级元素的margin-bottom值会传递给父元素

  • 如何防止出现传递问题?

  1. 给父元素设置padding-top\padding-bottom
  2. 给父元素设置border
  3. 触发BFC:设置overflow为auto/hidden/scroll

    • 建议

  4. margin一般是用来设置兄弟元素之间的间距

  5. padding一般是用来设置父子元素之间的间距

触发BFC

  • BFC:block format context
  • 结界

如何触发BFC:

  • 浮动可以触发
  • 设置一个元素的overflow为非visible (hidden/auto/scroll)

发表评论

表情:
评论列表 (有 0 条评论,179人围观)

还没有评论,来说两句吧...

相关阅读