margin系列之重叠

不管“程序猿”的世界是多么的杂乱，首先来个 css 2.1规范>Box model>margin-properties.

关于外边距重叠(Collapsing margins），该规范给出了如下几个规则：

  1. 对邻近外边距（Adjoining margins）的定义—分为不是（except）和是（if and only if）两种情况；
  2. 水平不重叠（Horizontal margins never collapse.）
  3. 最后在有邻近外边距的条件下，对重叠进行分类讨论。
时间： 2024-10-13 10:30:37

margin系列之重叠的相关文章

CSS外边距margin上下元素重叠

两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大的值.如果出现负边界,则在最大的正边界中减去绝对值最大的负边界.如果没有正边界,则从零中减去绝对值最大的负边界.注意:相邻的盒子可能并非是由父子关系或同胞关系的元素生成.但是边界的重叠也有例外情况: 1.水平边距永远不会重合.2.在规范文档中,2个或以上的块级盒模型相邻的垂直margin会重叠.最终的margin值计算方法如下:a.全部都为正值,取最大者:b.不全是正值,则都取绝对值,然后用正值减去最大值:c.没有正值,则

垂直margin为什么会重叠

之前看到的post中有这样的一个问题:垂直margin为什么会重叠?我可以说出solve,但是说不出why. 在stackoverflow上找到了一个很好的解释:margin的定义不是让元素移动xxpx,而是这个元素的旁边必须有xxxpx的的空白. 得到了这个解释之后,想一下“为首个子元素添加20px的上边距,父元素竟跟着子元素下沉了”这个问题,再思考一下解决方法.给父元素添加overflow开启一个BFC,或者给父元素增加padding.border之类,这样的做法使元素的旁边边界不是上一个盒

BFC 和 margin collapse（重叠）

写过很多页面的样式,但是却少有理论的基础,近日看到了关于BFC和一些关于magin collapse的知识 ,决定系统的整理一下. 一.BFC是什么? BFC(Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干. 二.BFC布局规则? 内部的Box会在垂直方向,一个接一个地放置. Box垂直方向的距离由margin

慎用margin系列3---IE6下3px bug

当我们想让一段文字出现在一个布局块的右边的时候,我们会让布局块向左浮动,然后把段落设置左布局块宽度大小的左空白.比如左布局块是.a{float:left;height: 110px;width: 286px;},我们就设置p{margin-left: 286px;border: 1px solid #000;},其中背景颜色和边框都是测试用的,不是必要的样式设置.在Firefox下可能没问题,但在IE下,你会发现布局块右边的段落离左边框有3px的空白,这就是一个bug.如图1 为了解决这个bug

margin系列之负值

对于负值的margin,好像 css 2.1 规范中没有提及(反正我没有找到).看来,"猿猴"的生活还木有结束... 但,就像孙悟空逃不了佛祖手掌心一样,程序猿也逃不了"规范"的手掌心.虽然规范中没说,但却给了我们暗示. 1.子元素有负值margin:也就是转化对于containing box的作用,这个就是css 2.1 规范中的 Visual formatting model details 的"等号关系式"了.就其中一种情况来说:Block

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

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

CSS 外边距(margin)重叠及防止方法

CSS 外边距(margin)重叠及防止方法 胡俊涛 | 2011-11-17 边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大的值.如果出现负边界,则在最大的正边界中减去绝对值最大的负边界.如果没有正边界,则从零中减去绝对值最大的负边界.注意:相邻的盒子可能并非是由父子关系或同胞关系的元素生成. 但是边界的重叠也有例外情况: 1.水平边距永远不

CSS 外边距(MARGIN)重叠及防止方法（转载）

边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大的值.如果出现负边界,则在最大的正边界中减去绝对值最大的负边界.如果没有正边界,则从零中减去绝对值最大的负边界.注意:相邻的盒子可能并非是由父子关系或同胞关系的元素生成.但是边界的重叠也有例外情况: 1.水平边距永远不会重合.2.在规范文档中,2个或以上的块级盒模型相邻的垂直margin会重叠.最终

上下margin重叠传递问题

我发现强迫症真的是我一个大病...每次都非得把所有情况都实验出来不可...BUT!!!!!!!!!悲催的是,这么多情况我根本记不住...还是要在写代码的时候不断出错再排错~受不了自己了!不过还是把这部分总结到这里啦~ 下面的几个部分应该是margin重叠问题的所有情况了: 1.两个普通元素上下的margin会合并为一个margin,哪个大选哪个! 两个浮动元素不会出现margin传递的问题,依然是上面元素的margin-bottom和下面元素的margin-top相加作为两者之间的margin值