<!DOCTYPEHTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN">
 <html>
 <head>
  <title></title>
 <metaname=""content="">
 <style>
   *{
    margin:0px;
    padding:0px;
 }
 
 #no1{
   background:#808000;
    width:300px;
   height:300px;
   margin:100px 0 0 100px;
    }
 
 #no2{
   background:#c0c0c0;
   width:150px;
  height:150px;
   margin-left:20px;
   margin-top:30px;
 }
 </style>
 </head>
 
 <body>
 
 <div id="no1">
 <div id="no2">Span2</div>
 </div>
 
</body>
 
</html>

如果您认为应该是这样的话：

那就错了。结果是这样的：

因为CSS中存在一个margin collapse，即边界塌陷或者说边界重叠。对于

上下两个并列的div块而言，上面div的margin-bottom和下面div的margin-

top会塌陷，也就是会取上下两者margin里最大值作为显示值，所以从这个

意义上说：CSS及浏览器的设计者们希望我们在布局时，如果遇到上下两个

并排内容块的安排，最好只设置其中每个块上或下margin的一处即可。w3s

chool也规定：当两个垂直外边距相遇时，它们将形成一个外边距。合并后

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

但对于父块DIV内含子块DIV的情况，就会按另一条CSS惯例来解释了，那

就是：对于有块级子元素的元素计算高度的方式,如果元素没有垂直边框和填

充,那其高度就是其子元素顶部和底部边框边缘之间的距离。所以对于代码：

   1: <div class="father"></div>

father这个div的高度为0，因为里面没有能够撑开div的内容。如果变为：

   1: <div class="father">I am here.</div>

则高度就是文字的高度，因为此时文字在撑着这个DIV。

话说回来，一个DIV和它的子DIV特别重视垂直边框或填充，也就好像是，

一口锅，里面放个盆，能不能扣住里面的盆，主要看锅盖了，垂直边框或填

充就是这个“锅盖”。于是解决的方式至少有以下三种：

1、需要给父div设置边框，当然可以设置边框为透明：

   1: border:1px solid transparent
   2: 或
   3: border-top:1px solid transparent

  2、为父DIV添加padding，或者至少添加padding-top;

   1: padding:1px
   2: 或
   3: padding-top:1px;   /*必须大于0*/

 3、为父DIV添加overflow:hidden

   1: over-flow:hidden;

CSS的margin塌陷（collapse）的更多相关文章

  1. 问题与对策：CSS的margin塌陷（collapse）

    1: <!DOCTYPEHTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN"> 2: <html> 3: & ...

  2. 慎用margin系列1---CSS的margin塌陷(collapse) 问题与对策

      对于以下简单代码: 如果您认为应该是这样的话: 那就错了.结果是这样的: 因为CSS中存在一个margin collapse,即边界塌陷或者说边界重叠.对于上下两个并列的div块而言,上面div的 ...

  3. CSS的margin塌陷

    一.两个div并列,上面div的margin-bottom和下面div的margin-top会塌陷,也就说会取上面div的margin-bottom和下面div的margin-top的最大值作为两个并 ...

  4. WEB学习-CSS中Margin塌陷

    margin的塌陷现象 标准文档流中,竖直方向的margin不叠加,以较大的为准. 如果不在标准流,比如盒子都浮动了,那么两个盒子之间是没有塌陷现象的: 盒子居中margin:0 auto; marg ...

  5. CSS基础 margin塌陷问题以及解决 办法

    场景:两个相互嵌套的块级元素,父子元素相互紧贴margin-top会合并作用在父元素的子元素结果:导致两个盒子同时移动 解决方法: 1.给父元素设置overflow:hidden 2.给父元素设置浮动 ...

  6. css margin塌陷问题

    一.同级块级元素塌陷 html <h2> 同级块级元素塌陷 </h2> <div class="block1"> block1 </div ...

  7. 林大妈的CSS知识清单（二）可见格式化模型（内含margin塌陷与浮动闭合的解决方案）

    盒模型.浮动和定位是CSS中最重要的三个概念.它们共同决定了一个元素在页面中以怎样的形式进行排布与显示. 一.盒模型 1. 定义 盒模型是CSS的核心概念.一个页面中,所有的元素(不管他最终显示是圆形 ...

  8. “margin塌陷” 嵌套盒子外边距合并现象

    来源于官方文档对于外边距合并的解释: 注释:只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 出现外边距塌陷的三种情况: 1.相邻兄弟元素之间 若两者 ...

  9. margin塌陷与margin合并（margin），清除浮动

    **1.margin塌陷**问题:垂直方向的父子关系的盒子使用不当会产生margin塌陷.给子级设置margin-top时,他不会相对父级一起动,只有他的margin超过父级的margin时,才会生效 ...

随机推荐

  1. Python之路第一课Day5--随堂笔记（模块）

    本节课程大纲: 1.模块介绍 2.time &datetime模块 3.random 4.os 5.sys 6.shutil 7.json & picle 8.shelve 9.xml ...

  2. java并发编程（十七）内存操作总结

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/17377197 主内存与工作内存 Java内存模型的主要目标是定义程序中各个变量的访问规则, ...

  3. 初步认识Less

    LESS 是一个流行的样式表语言,它提供了 CSS3 也未曾实现的多种功能,让您编写 CSS 更加方便,更加直观.LESS 已经被广泛使用在多种框架中 ( 例如:BootStrap).本文将介绍 LE ...

  4. 浅谈Js闭包现象

    一.1.我们探究这个问题的时候如果按照正常的思维顺序,需要知道闭包是什么它是什么意思,但是这样做会让我们很困惑,了解这个问题我们需要知道它的来源,就是我们为什么要使用闭包,先不管它是什么意思!     ...

  5. ASP.NET跨平台实践：无需安装Mono的Jexus“独立版”

    在Linux上运行ASP.NET网站或WebApi的传统步骤是,先安装libgdiplus,再安装mono,然后安装Jexus.在这个过程中,虽然安装Jexus是挺简便的一件事,但是安装mono就相对 ...

  6. Javascript基础回顾 之(一) 类型

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  7. ASP.NET MVC 5 - 给电影表和模型添加新字段

    在本节中,您将使用Entity Framework Code First来实现模型类上的操作.从而使得这些操作和变更,可以应用到数据库中. 默认情况下,就像您在之前的教程中所作的那样,使用 Entit ...

  8. 老司机学Xamarin系列总目录

    Xamarin开发环境及开发框架初探 Xamarin Forms开发框架二探 (Prism vs MvvmCross) Xamarin Forms开发框架之MvvmCross插件精选 Xamarin开 ...

  9. Node.js Base64 Encoding和Decoding

    如何在Node.js中encode一个字符串呢?是否也像在PHP中使用base64_encode()一样简单? 在Node.js中有许多encoding字符串的方法,而不用像在JavaScript中那 ...

  10. java中构造方法的特殊性

    构造方法名与类名相同 构造方法没有返回值,也不能写void 构造方法的主要作用是完成对对象的初始化工作 构造方法一般不由编程人员显示调用,而是由new来调用 在创建一个类的对象的同时,系统会自动调用该 ...