1: <!DOCTYPEHTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN">

   2: <html>

   3: <head>

   4:     <title></title>

   5:     <metaname=""content="">

   6: <style>

   7: *{

   8:     margin:0px;

   9:     padding:0px;

  10: }

  11:  

  12: #no1{

  13:     background:#808000;

  14:     width:300px;

  15:     height:300px;

  16:     margin:100px 0 0 100px;

  17:     }

  18:  

  19: #no2{

  20:     background:#c0c0c0;

  21:     width:150px;

  22:     height:150px;

  23:     margin-left:20px;

  24:     margin-top:30px;

  25: }

  26: </style>

  27: </head>

  28:  

  29: <body>

  30:  

  31: <div id="no1">

  32:     <div id="no2">Span2</div>

  33: </div>

  34:  

  35: </body>

  36:  

  37: </html>

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

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

因为CSS中存在一个margin collapse，即边界塌陷或者说边界重叠。对于上下两个并列的div块而言，上面div的margin-bottom和下面div的margin- top会塌陷，也就是会取上下两者margin里最大值作为显示值，所以从这个意义上说：CSS及浏览器的设计者们希望我们在布局时，如果遇到上下两个并排内容块的安排，最好只设置其中每个块上或下margin的一处即可。w3school也规定：当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

但对于父块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;

来源：http://www.ido321.com/387.html

问题与对策：CSS的margin塌陷（collapse）的更多相关文章

  1. CSS的margin塌陷（collapse）

    <!DOCTYPEHTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head&g ...

  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. 1049: [HAOI2006]数字序列 - BZOJ

    Description 现在我们有一个长度为n的整数序列A.但是它太不好看了,于是我们希望把它变成一个单调严格上升的序列.但是不希望改变过多的数,也不希望改变的幅度太大.Input 第一行包含一个数n ...

  2. 你不需要jQuery(五)

    什么不用jQuery?因为它让你的网站体积变得臃肿.你的网站并不真的需要jQuery,不需要它带来的额外体积.带宽和加载时间. 用原生JavaScript简单实现jQuery提供的功能和方法 查找.选 ...

  3. PowerDesigner(五)-概念数据模型(CDM生成LDM,PDM和OOM)

    概念数据模型 概念数据模型(Conceptual Data Model,CDM):表达的是数据整体逻辑结构,该结构独立于任何软件和数据存储结构,即它只是系统分析人员,应用程序设计人员,维护人员和用户之 ...

  4. Centos后台运行jar

    jar后台运行 nohup java -jar xx.jar >/dev/null & 此处的">/dev/null"作用是将终端输出信息输出到空洞中,即不保存 ...

  5. 219. Contains Duplicate II

    题目: Given an array of integers and an integer k, find out whether there are two distinct indices i a ...

  6. Servlet 下载文件

    这几天有点懒散,还好没有忘记看书,上周去了国家图书馆翻阅了一些和Java相关的书籍,其实这些书都是自己以前看过或者听过,按理来说,不应该看自己已经看过的书籍,应该找一些最新的书籍去看,但是每次走到书架 ...

  7. 超实用的PHP代码片段

    一.查看邮件是否已被阅读 当你在发送邮件时,你或许很想知道该邮件是否被对方已阅读.这里有段非常有趣的代码片段能够显示对方IP地址记录阅读的实际日期和时间. 1 2 3 4 5 6 7 8 9 10 1 ...

  8. python函数--传参

    一.位置参数 二.关键字参数 三.默认参数 四.任意数量的位置参数: 1. *x 2. 传入的多个参数,最终合并成一个元组 3. 之后的参数必须用关键字参数 五.任意数量的关键字参数 1. **x 2 ...

  9. 配置MySQL使用HugePages

    前言:对于有Oracle运维经验的童鞋来说,如果服务器内存很大,一般都会设置HugePages,是因为如下原因:对于 Linux 操作系统,通过 Linux kswapd 进程和页表内存结构(针对系统 ...

  10. IMX51+WINCE6.0平台缩写意义

    1.以EPIT为例 EPIT(Enhanced Periodic Interrupt Timer)为增强型周期中断定时器,其中有CR控制寄存器,要设置CR寄存器的SWR位,代码如下: // Asser ...