有两个有嵌套关系的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. 折腾源WRT的AC路无线路由-2

    在创纪录的开箱图,开箱后,我觉得大尺寸,因此,获得一些各种尺寸,喜欢网上购物的参考.也许这,安装后,它占用的大小:基本长度=28.5cm.深度=19.5cm,高=19.5,因为制造商推荐的约两个天线是 ...

  2. Android中怎么去除标题栏详解

    怎么出去标题栏,我再另一个博客中亦有实例在这里再详细的解释一下,也让自己能更加巩固最简单也是小重要的东西. 这里有两种方法是比较好的... 第一种: 首先,在values中建一个theme.xml 代 ...

  3. Oracle之savepoint

    Oracle之savepoint 什么是savepoint?Use the SAVEPOINT statement to identify a point in a transaction to wh ...

  4. 使用vs2010复制粘贴代码时特别卡用一段时间就特别卡重启也没用

    vs2010编写代码一段时间后复制粘贴特别卡,下拉条也特别卡,这个状况困扰了我两个月,实在忍不住了,去网上搜了搜 有网友说是快捷键冲突,所以我就把其他程序结束了,结果莫名奇妙的瞬间就不卡了.最终弄明白 ...

  5. C# 导入导出excel文件案例

    个人总结导出excel报表的案例: //导出报表 protected void btnExport_Click(object sender, EventArgs e) { List<ProOut ...

  6. Dynamics CRM 客户端的插件调试

    Dynamics CRM 客户端的插件调试 一直以来,Dynamics CRM插件在大家的印象中都是不便于调试的,根据官方文档(http://technet.microsoft.com/zh-cn/l ...

  7. js中的屏蔽

    js屏蔽效果 /** 屏蔽F1帮助 */  window.onhelp = function(){return false;}     /**  *屏蔽 F5.Ctrl+N.Shift+F10.Alt ...

  8. C# 号码归属地查询算法(根据Android来电归属地二进制文件查询修改)

    前言 近期有个项目需要用到号码归属查询,归属地数据库可能比不上ip138,淘宝上也有卖的-,-! 文本提供一个279188条记录并压缩成562KB的归属地数据.我在互联网上搜索了相关文章,要不是数据库 ...

  9. 在windows上编译MatConvNet

    有个BT的要求,在windows上使用MatConvNet,并且需要支持GPU. 费了些力气,记录一下过程(暂不支持vl_imreadjpeg函数) 在这里下载MatConvNet,机器配置vs201 ...

  10. LigerUI权限系统之组织结构

    先上图,再看代码.组织结构界面 组织结构添加: 组织结构修改: 组织结构删除: 我在做这个页面的时候treegrid 的远程数据加载让我很头痛,从LigerUI官网提供的Demo来看,它是根据json ...