码迷,mamicode.com
首页 > 其他好文 > 详细

margin collapse

时间:2018-03-23 14:11:38      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:size   绝对定位   block   之间   blog   注意   规则   最大值   nbsp   

margin折叠规则

  • 两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠



  • 浮动元素/inline-block的元素/绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠



  •  创建了块级格式化内容的元素,不和它的子元素发生margin折叠



  •  元素自身的margin-bottom和margin-top相邻时也会折叠
一个元素margin-top会和它普通流中的第一个子元素(非浮动元素等)的margin-top相邻;只有在一个元素的height是”auto”的情况下,它的margin-bottom才会和它普通流中的最后一个子元素(非浮动元素等)的margin-bottom相邻。



有人可能说了,算A和B之间的margin,分别算A和其父元素的折叠,然后与其父元素的父元素的折叠,这个值算出来之后,应该是90px。依此法算出B的为80px;然后,A和B折叠,margin 为90px。
对吗?错了,大错特错。错在哪里了呢?
请注意,多个margin相邻折叠成一个margin,所以计算的时候,应该取所有相关的值,而不能分开,分步来算。
以上例子中,A和B之间的margin折叠产生的margin,是6个相邻margin折叠的结果。
分别是:
正值:50px,150px,200px
负值:-60px,-100px,-120px
根据有正有负时的计算规则,正值的最大值为 200px,负值中绝对值最大的是-120px,所以,最终折叠后的margin应该是 200 + (-120) = 80px。

margin collapse

标签:size   绝对定位   block   之间   blog   注意   规则   最大值   nbsp   

原文地址:https://www.cnblogs.com/paopaolee/p/8629776.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!