CSS: margin叠加几种情况

margin叠加的意思是:当两个或者更多的垂直外边距 相遇时,它们将形成一个外边距,这个外边距的高度等于两个发生叠加的外边距中高度较大者。

1.当一个元素出现在另一个元素上面时,第一个元素的底边外边距与第二个元素的顶边外边距发生叠加。如图:

2.当一个元素在另一个元素中时,它们的顶边距和低边距也会发生叠加

3. 如果一个元素是空元素(即一个元素没有内容,内边距和边框),这种情况外边距的顶边距和低边距碰在一起也会发生叠加

4.在上面那种空元素的情况,如果该空元素与另一个元素的外边距碰在一起,也会发生叠加。

注: 以上4种外边距叠加情况只会发生在普通文档流的垂直方向。行内框、浮动框、绝对定位框之间的外边距不会发生叠加,同样水平方向也不会发生叠加。

参考书籍:精通css,高级web标准解决方案

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,825评论 1 92
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,101评论 0 1
  • 标准盒模型、怪异盒模型 CSS中Box model是分为两种:: W3C标准(标准盒模型) 和 IE标准盒子模型(...
    陆lmj阅读 390评论 0 0
  • 3.1 盒子模型概述 盒子模型是CSS 的基石之一,它指定元素如何显示以及(在某种程度上)如何相互交互.页面上的每...
    Yisuo烟雨阅读 223评论 0 0
  • 1.HTML微格式 由于HTML中缺少相应的元素,很难突出显示人、地点或日期等类型的信息。为了解决这个问题,有一组...
    韩懿軒阅读 733评论 0 4