margin collpase(margin合并)小结

一、前言

标题的margin collpase(margin 合并),江湖又成“margin 塌陷”;以前对margin 合并的理解就是在紧邻的兄弟元素中上一个的margin-bottom会和下一个的margin-top合并;紧邻父子元素,margin-top会合并;然后,就没有然后了。直到实际项目中,看到已有项目中存在父子margin没有合并的现象,但是自己又理解不了的时候,才人认真的将w3c中有关margin合并的规则看一遍。

二、margin collpase

margin collpase 规则

  1. root Element 不合并
  2. 相邻(adjoining )margin合并为最大值

第一条中的root Element,即BFC,不知道BFC为何物的,待会儿请看下边的相关链接,不过这个不影响下边内容的理解

第二条中的相邻(adjoing)的条件:(必须三条都满足)

  1. 在同一个BFC中,且在文档流中的块级元素
  2. 相邻的margin之间没有行内元素(line boxes)、内边距(padding)、边框(border),如果是高度为0的行内元素无效如(空标签<span><span>等)
  3. margin都是垂直方向

相邻规则:

  1. top margin of a box and top margin of its first in-flow child(元素的margin-top以及它在文档流中的第一个子元素的margin-top)
  2. bottom margin of box and top margin of its next in-flow following sibling(元素margin-bottom和它在文档流中后边紧邻兄弟元素的margin-top)
  3. bottom margin of a last in-flow child and bottom margin of its parent if the parent has ‘auto‘ computed height(文档流中最后一个子元素的margin-bottom和它父元素的margin-bottom,前提是,父元素的height是auto的)
  4. top and bottom margins of a box that does not establish a new block formatting context and that has zero computed ‘min-height‘, zero or ‘auto‘ computed ‘height‘, and no in-flow children(非BFC元素的margin-top和margin-bottom,并且这个元素的min-height为0,height为0或者auto,且没有文档流内的子元素)

margin负值合并规则:

When two or more margins collapse, the resulting margin width is the maximum of the collapsing margins‘ widths. In the case of negative margins, the maximum of the absolute values of the negative adjoining margins is deducted from the maximum of the positive adjoining margins. If there are no positive margins, the maximum of the absolute values of the adjoining margins is deducted from zero.(多个margin合并的时候,合并得到的是最大值。如果margin是负值,正值最大的margin减去负值绝对值最大margin的绝对值就是最终margin;如果没有正值margin,结果就是0减去负值绝对值最大margin绝对值)

三、阻止margin collpase

上边的margin collpase规则是2条,针对这两条有两种行之有效的方法:

  1. 将元素转变为BFC,具体查看BFC相关内容中的产生规则(当时在项目中看到的overflow:hidden就是符合这条原理)
  2. 将相邻的margin切断,从相邻条件的三条中,我们可以看到,第2条还是可以阻止的。给元素添加padding,border。如果设计中没有border,可以将border设置为透明(border-color:transparent;)

Technorati 标记: css

时间: 2024-10-13 21:17:31

margin collpase(margin合并)小结的相关文章

margin外边距合并详解

margin外边距合并详解: 外边距合并现象在网页布局中非常的常见,必须对此有明确的把我,以此做到未雨绸缪,否则可能影响工作效率,甚至严重阻碍项目的进度.在网络上已经有大量的相关文章,下面再通过实例结合对网络教材的总结,再来介绍一下外边距合并现象. 概念: 相邻的两个或者多个外边距在垂直方向上合并成一个外边距,这就是所谓的外边距合并. 水平方向不存在此现象. 外边距合并产生条件: 1.相邻的外边距之间没有非空内容.padding和border和clear分隔. 2.对象都处于文档流中,即非浮动和

[ css 外边距 margin ] css中margin外边距合并问题讲解及实例演示

外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距;合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者 外边距合并外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者.当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并.请看下图: CSS 外边距合并实例 1 亲自试一试

转载:margin外边距合并问题以及解决方式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .div{ /* overflow: hidden/auto;*//*利用该属性或者通过给父级元素设置border可以避免出现父级元素的margin合

margin塌陷与合并问题

本文转自: https://blog.csdn.net/Sunshineanl/article/details/70767277 margin塌陷问题和合并问题都只对垂直方向有效 margin塌陷问题 这个问题是一个经典的浏览器内核问题.具体表现是当两个元素嵌套到一起时,外层盒模型的margin-top取两个元素中margin-top较大的值. 因为在正常的情况下内层元素是相对于外层元素进行移动,但是这时内层元素却相对于整个文档进行移动,好像外层元素没有“棚顶”一样,因此叫margin塌陷问题.

eclipse svn合并小结

合并时候,当前在哪个分支上,哪个分支即为"主干" 弱化主干 分支的概念.svn原则上并没有主干 分子 主 从的概念.从一个项目衍生(分支)出来的版本,都可以是主,也可以是从. 版本之间互相合并原理 文件覆盖过来,有冲突的标明. 下图:合并的时候选1:合并一个 分支/或者主 到当前所在的节点. 3:合并两个 到当前节点 有  A,B,C三个版本(可能从其中一个主干,两个个分)  可以 互相合并

margin的合并

--本文margin合并的前提是未对元素设置过float.position 元素本身在标准文档流中 首先,margin的合并(前提二个以上的margin)是发生在纵向上的,也就是说,margin的合并只会发生在垂直方向,水平方向设置的margin是不会发生合并的现象的. 上代码: <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title

CSS外边距合并(塌陷/margin越界)

原文 简书原文:https://www.jianshu.com/p/5f18f12cd162 大纲 1.什么是外边距合并?(折叠外边距) 2.外边距带来的影响 3.折叠的结果 4.产生折叠的原因 5.出现的情况 1.什么是外边距合并?(折叠外边距) 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者.而左右外边距不合并. 在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距.这种

margin小结

一. margin百分比 1. 普通元素的百分比margin都是相对于容器的宽度计算 2. 绝对定位元素的百分比margin是相对于第一个定位祖先元素(relative/absolute/fixed)的宽度计算 这是在默认的 writing-mode: horizontal-tb; 和 direction: ltr; 的情况下, 若书写模式变成纵向的时候,其参照将会变成包含块的高度. 二. margin重叠 1. 通常特性 block水平元素(不包括float和absolute元素) 不考虑wr

须知的css——margin不重叠的情形

margin重叠 摘自css2.1规范中文版 CSS中,两个或者多个盒(可能但不一定是兄弟)的相邻的margin会被结合成一个margin.Margin按这种方式结合叫重叠(collapse),产生的结合的margin叫做重叠margin. margin重叠的计算规则 摘自css2.1规范中文版 当两个或者更多的margin合并时,产生的margin宽度为合并margin宽度中的最大值.至于负margin,就从正相邻margin的最大值中减去负相邻margin的绝对值的最大值.如果没有正marg