有两个有嵌套关系的div,如果外层div的父元素的padding值为0,那么内层子div的margin-top或margin-bottom的值会转移给外层的父div,即magrin塌陷现象。

    解决办法:

      1.在父元素div上加上:overflow:hidden;

      2.把margin-top外边距改成padding-top内边距;

      3.父元素div产生边距重叠的边有不为0的padding或宽度不为0且style不为none的border;父元素添加padding-top:1px;

      4.让父元素生成一个 block formating context,以下属性可以实现
            * float: left/right
            * position: absolute
            * display: inline-block/table-cell(或其他 table 类型)
           * overflow: hidden/auto
            父层div加:position: absolute; 

margin塌陷现象(即在内层设置margin-top无效的解决办法)的更多相关文章

  1. wordpress设置固定链接无效的解决办法

    声明:本人用的是Ubuntu 10.04 LAMP服务 以下内容是针对在Apache服务器下Wordpress修改固定链接出错无效的解决办法: 如果改了固定链接以后出问题,请查看Wordpress根目 ...

  2. 设置overflow:auto无效的解决办法

    做项目中经常要用到滚动条,有时候给div设置overflow无效. 遇到这样的问题,只需要在 F12 Elements面板检查一下要设置overflow的元素的宽高是否大于父级元素宽高. (overf ...

  3. centos设置中文输入法无效的解决办法

    安装 im-chooser: yum install im-chooser 回到当前使用的普通用户,设置 ibus 输入法为默认输入系统: imsettings-switch ibus

  4. xadmin下设置“use_bootswatch = True”无效的解决办法

    环境: python 2.7 django 1.9 xadmin采用源代码的方式引入到项目中 问题: 在xadmin使用的过程中,设置“use_bootswatch = True”,企图调出主题菜单, ...

  5. C# 反射 设置字段值无效的解决办法

    FieldInfo.SetValue的原型是:void SetValue(object obj, object value)当你传递一个值类型(结构是值类型)的时候,它要转化成object,也就是要装 ...

  6. Web.Debug.config和Web.Release.config设置xdt:Transform无效的解决办法

    在VS中右键网站>发布时xdt:Transform 生效.但是使用tfs的build时,build可以正常通过,但是web.release.config中的xdt:Transform 无效,其它 ...

  7. Idea内存设置idea.vmoptions无效的解决办法

    原因:貌似是因为maven的问题 解决办法 结果

  8. margin塌陷现象

    如果两个盒子是包含关系,如果让子盒子在父盒子之内向下平移100px:(margin塌陷现象)解决方案: padding , border , overflow <!DOCTYPE html> ...

  9. HTML给div设置百分比高度无效的解决方式 - 库塔姆斯 - CSDN博客

    原文:HTML给div设置百分比高度无效的解决方式 - 库塔姆斯 - CSDN博客 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/HobHunter ...

  10. 设置height:100%无效的解决方法

    设置height:100%无效的解决方法 刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:" ...

随机推荐

  1. Java Persistence with MyBatis 3(中国版)

    译者的话 前段时间因为工作和学习的须要,我打算深入研究MyBatis框架.于是在网上查找关于MyBatis的教程,发现国内网上关于MyBatis的教程资料少得可怜:除了MyBatis官网上的用户使用手 ...

  2. 一个用MFC实现Com聚合样本

    ComATLATLMFCMFC MFCIUnknownMFCCCmdTargetComMFCCom MFCCOM 1. 1.1 #pragma once typedef long HRESULT; / ...

  3. ASP.NET MVC IOC 之AutoFac

    ASP.NET MVC IOC 之AutoFac攻略 一.为什么使用AutoFac? 之前介绍了Unity和Ninject两个IOC容器,但是发现园子里用AutoFac的貌似更为普遍,于是捯饬了两天, ...

  4. 数据结构栈的java实现

    近来复习数据结构,自己动手实现了栈.栈是一种限制插入和删除只能在一个位置上的表.最基本的操作是进栈和出栈,因此,又被叫作“先进后出”表. 实现方式是这样的:首先定义了一个接口,然后通过这个接口实现了线 ...

  5. android获取存储卡使用情况

    package com.aib.com; import java.io.File; import android.app.Activity; import android.os.Bundle; imp ...

  6. IIS日志分析的作用

    站长都知道有ISS日志,可是有很少人去关注它,也许你觉得在一些站长工具里面我们就能找到我们想要的工具,哪你就错了,我们的网站被收入靠的是蜘蛛,想要真正了解蜘蛛,就一定要好好重视iss日志分析,为什么这 ...

  7. tomcat创建一个windows服务

    具体步骤如下: 1.把JDK解压到C:\Program Files\Java下,Tomcat解压到D:\tomcat下 2.配置环境变量 JAVA_HOME:C:\Program Files\Java ...

  8. JavaScript面向对象编程(二)构造函数和类

    new关键字和构造函数 在文章JavaScript面向对象编程(一)原型与继承中讨论啦JavaScript中原型的概念,并且提到了new关键字和构造函数.利用new关键字构造对象的实例代码如下: // ...

  9. 分享自制的C#和VB Code互转工具

    分享自制的C#和VB Code互转工具 作为.NET程序员,往往习惯使用一种语言(据我观察,2006年后的程序员习惯用C#,之前的喜欢VB).而对于另一种语言虽然能读懂但是写起来总是比较费事.尤其面对 ...

  10. php memcached+Mysql(主从)

    /* index.php   程序入口,用来构造sql(如查询,更新) config.php  配置参数(memcache,mysql) init.php    封装memcached操作(memca ...