简单理解css中的盒子外边距垂直方向上的合并问题

简单地说,外边距合并指的是,当两个垂直方向上的外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
个人理解:不是相遇而是相连。
当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。如下:


1.gif

当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并。如下:


2.gif

尽管看上去有些奇怪,但是外边距甚至可以与自身发生合并。
假设有一个空元素,它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距就碰到了一起,它们会发生合并:
3.gif

如果这个外边距遇到另一个元素的外边距,它还会发生合并:
4.gif

总的来说就是:一个外边距与另一个外边距相连时(只要有部分挨在一起),然后在垂直方向上有外边距合并;

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,844评论 1 92
  • 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度...
    燃烧吧_小宇宙阅读 619评论 0 0
  • 1.浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动元素不在文档的普通流中,它可以...
    饥人谷_Young丶K阅读 469评论 0 0
  • 外边距合并指的是:当两个垂直外边距相遇时,它们将形成一个外边框。合并后的外边距高度等于两个发生合并的外边距的较大者...
    你的操作666阅读 347评论 0 0
  • 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度...
    种谔阅读 661评论 2 5