CSS 样式篇之外边距折叠

根据 W3C 规范中 Collapsing margins 部分的说明,比邻元素的边距总是折叠,除了以下几种情况:

  • 根元素不折叠
  • 浮动元素不折叠
  • BFC 元素不折叠
  • 定位元素不折叠
  • inline-box 元素不折叠
  • 父元素有 padding 和 border 不折叠

外边距折叠的几种形式:

  • 当一个元素出现在另一个元素上面时,第一个元素的底外边距和第二个元素的顶外边距发生叠加
  • 当一个元素包含在另一个元素中时,他们的顶和底外边距也会发生叠加
  • 有外边距,无内边距/边框的空元素,外边距会自身发生叠加
  • 有外边距,无内边距/边框的空元素遇到另一个元素的外边距时还会发生合并
除特殊说明外本人博客均属原创,转载请注明出处:http://blog.johnhan.cn/blog_1093.html
京ICP备19044523号-1