CSS外边距的合并

  外边距合并:当两个垂直外边距相遇时,它们将形成一个外边距。

  合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

  

  1.当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。合并时外边距取其中的最大值。

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

      

    #如果想第一个元素的下外边距与第二个元素的上外边距不发生合并,除了设边框还可以给父级一个overflow:hidden属性

  3.若有一个空元素,它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距就碰到了一起,它们会发生合并:

     

  如果这个外边距遇到了另一个元素的垂直外边距,他们也会合并:

     

    ###参考CSS3开发手册

时间: 2024-12-28 11:31:44

CSS外边距的合并的相关文章

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

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

【css基础】垂直外边距的合并

这个题目参考大神,链接如下: http://www.cnblogs.com/kuangbin/archive/2012/08/30/2664419.html 还有种类并查集的详细解答,链接如下: http://www.cnblogs.com/wuyiqi/archive/2011/08/24/come__in.html 题目链接 题目如下: Dragon Balls Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/327

CSS 外边距合并。

<div id = "parent"> <div id = "child"> demo </div> </div> #parent { background: red; width: 200px; height: 200px; } #child { background: green; width: 50px; height: 50px; margin-top: 50px; } child的margin-top传递到了

CSS 外边距合并

基础讲解可参见 http://www.w3school.com.cn/css/css_margin_collapsing.asp 外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆. 简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并.请看下图: 当一个元素包含在另一个元素中时(假设没有

CSS外边距合并(折叠)问题。

CSS外边距合并 块级元素的上外边距和下外边距有时会合并(或折叠)为一个外边距,其大小取其中的最大值,这种行为称为外边距折叠(margin collapsing),有时也翻译为外边距合并.注意浮动元素和绝对定位元素的外边距不会折叠. 下面列出了会发生外边距折叠的三种基本情况: 相邻元素之间 毗邻的两个元素之间的外边距会折叠(除非后一个元素需要清除之前的浮动). 父元素与其第一个或最后一个子元素之间 如果在父元素与其第一个子元素之间不存在边框.内边距.行内内容,也没有创建块格式化上下文.或者清除浮

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

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

CSS外边距合并问题

今天无意中碰到了外边距合并的问题,于是便研究了一下.这里做个笔记. 所谓外边距合并,指的是当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 例如,这里有这样两个块元素: <div class="box1"></div> <div class="box2"></div> 这里给的样式是: .box1{ width:150px; height:150px; bac

CSS外边距合并

1 当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并. 2 当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并.如果父元素有内边距,则子元素的外边距以父元素的内边距为准,不会发生外边距合并. 3 假设有一个空元素,它有外边距,但是没有边框或填充.在这种情况下,上外边距与下外边距就碰到了一起,它们会发生合并. 4 只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合

Css 外边距折叠(collapsed margin ) 浅析

Css 外边距折叠(collapses margin ) a.先来看看w3c 文档对于外边距折叠的定义: In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting