一、两个div并列，上面div的margin-bottom和下面div的margin-top会塌陷，也就说会取上面div的margin-bottom和下面div的margin-top的最大值作为两个并列div中间的margin显示值。
解决方法：两个div并列，只设置其中一个块上或下margin的一处即可。

二、父块div内含子块div，且父div没有border-top、padding-top或overflow:hidden这些css属性，这时父、子div的margin-top值会取两个div的最大margin-top值。
解决方法：
给父div设置
1、border:1pxsolidtransparent
2、padding-top;
3、over-flow:hidden;

可参考：

http://blog.chinaunix.net/uid-22414998-id-3138656.html
http://blog.csdn.net/dclchj/article/details/9787481

CSS的margin塌陷的更多相关文章

  1. CSS的margin塌陷（collapse）

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

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

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

  3. WEB学习-CSS中Margin塌陷

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

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

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

  5. css margin塌陷问题

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

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

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

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

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

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

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

  9. Unit 6.标准文档流,浮动,清除浮动以及margin塌陷问题

    一. 什么是标准文档流 文本流其实就是文档的读取和输出顺序,也就是我们通常看到的由左到右.由上而下的读取和输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的,而float和position两个 ...

随机推荐

  1. linux awk 中 RS,ORS,FS,OFS 区别与联系【转】

    linux awk 中 RS,ORS,FS,OFS 区别与联系 http://blog.csdn.net/jesseen/article/details/7992929

  2. navicat:cannot create oci environment

    1.请注意红色箭头处的配置是从oracle官网下载的安装包 ,当然百度也是很强大的.(建议是在navicat安装目录下解压) 2.红色方框内的是你本地的oracle数据库的sqlplus.exe启动地 ...

  3. Android Activity设置为全屏的方法

    1:代码方式: 放到setContentView之前 //隐藏标题栏 this.requestWindowFeature(Window.FEATURE_NO_TITLE); //隐藏状态栏 this. ...

  4. 用“%20”取代字符串中空格的时间复杂度为O(n)的算法

    /*length 为字符串数组string的总容量*/ void ReplaceBlank(char stringp[],int length) { ) return; /*originalLengt ...

  5. 用DIV+Css+Jquery 实现的旧版微信飞机大战。

    用jquery 实现的旧版微信飞机大战. 以前一直都是做后台和业务逻辑,前端很少去做, 现在个小游戏. 方向键控制方向,Ctrl 键 放炸弹(当然你的有炸弹,哈哈)! 主要都是用div+Css实现的, ...

  6. 黑马程序员_JavaIO流（二）

    字符流的缓冲区 缓冲区的出现提高了对数据的读写效率. 对应类: BufferedWriter BufferedReader 缓冲区要结合流才可以使用. 在流的基础上对流的功能进行了增强. Buffer ...

  7. 【转】MVC5中的区域(Areas)

    MVC本身提倡的就是关注点分离.但是当项目本身的业务逻辑足够复杂,如果所有的业务逻辑都写个Controller文件夹下面的时候,你会看到非常庞大的各种命名的Controller,这个时候区域的作用就非 ...

  8. Shell中变量的使用

    1.变量的声明 name="blacksonny" 注意://变量定义时不加$,变量与等号之间不能有空格 变量命名规则: 首个字符必须为字母(a-z,A-Z). 中间不能有空格,可 ...

  9. [原创]安卓使用Termux做渗透测试(演示sqlmap安装,并附上一个神器)

    由于手机kali太大,并且MIUI8+Android6.0的我.用手机kali不是太方便(懒得捣鼓),所以另找道路,用手机作渗透测试. 1.下载一个Termux,并授予ROOT权限. 2.打开之后输入 ...

  10. int与Integer

    int 是基本类型,直接存数值 integer是对象,用一个引用指向这个对象 1.Java 中的数据类型分为基本数据类型和复杂数据类型 int 是前者>>integer 是后者(也就是一个 ...