一、两个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. 基于python的接口测试学习笔记一(初出茅庐)

    第一次写博客笔记,讲一下近来学习的接口自动化测试.网上查阅了相关资料,最后决定使用python语言写接口测试,使用的是python的第三方库requests.虽然python本身标准库中的 urlli ...

  2. Centos+nginx+uwsgi+Python多站点环境搭建

    前言 新公司的第一个项目,服务器端打算用python作为restful api.所以需要在Centos上搭建nginx+fastcgi+python的开发环境,但后面网上很多言论都说uwsgi比fas ...

  3. Laravel 依赖注入原理

    众所周知 Laravel 的文档对于依赖注入只写了如何使用,相信大多数人对于他的实现原理并不太清楚.虽然使用过程中并不需要关心她的原理,但是了解原理让你使用起来更自信.这个帖子就通过一个小 demo ...

  4. android上传图片至服务器

    本实例实现了android上传手机图片至服务器,服务器进行保存 服务器servlet代码publicvoid doPost(HttpServletRequest request, HttpServle ...

  5. ASM-51汇编出错信息表

    1  Address Out of Range 一个被计值的目标地址超出了当前语句的范围.2 Badly Formed Argument 数字规定的类型中有非法数字存在.3 Illefal Equal ...

  6. 【转】Android:ListView常见错位之CheckBox错位

    原文网址:http://blog.csdn.net/lemon_tree12138/article/details/39337867 ListView在什么样的情况下会出现错位?错位的原因是什么?怎么 ...

  7. 2015第24周四Spring事务4

    Spring配置文件中关于事务配置总是由三个组成部分,分别是DataSource.TransactionManager和代理机制这三部分,无论哪种配置方式,一般变化的只是代理机制这部分.     Da ...

  8. Razor 在JS中嵌入后台变量

    HTML 中定义全局变量 @{ int CurrentUserId =ViewBag.CurrentUserId; } JS中取值方式var CurrentUserId = parseInt(@Htm ...

  9. Codeforces Round #301 (Div. 2) E . Infinite Inversions 树状数组求逆序数

                                                                    E. Infinite Inversions               ...

  10. 求一个数组中第K小的数

    面试南大夏令营的同学说被问到了这个问题,我的第一反应是建小顶堆,但是据他说用的是快排的方法说是O(n)的时间复杂度, 但是后来经过我的考证,这个算法在最坏的情况下是O(n^2)的,但是使用堆在一般情况 ...