有两个有嵌套关系的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. SQLite数据库查看工具(免费)

    1. SQLite Administrator http://sqliteadmin.orbmu2k.de/ iteSpy 2.  SQLiteSpy   http://www.yunqa.de/de ...

  2. Play framework 2.0

    Play framework 2.0北京时间3月14日消息,根据Play framework官方网站消息,目前Play framework 2.0正式版已经发布.新版本的Play framework进 ...

  3. 【转】【Android工具】被忽略的UI检视利器:Hierarchy Viewer

    原文:http://blog.csdn.net/ddna/article/details/5527072 Hierarchy Viewer是随AndroidSDK发布的工具,位置在tools文件夹下, ...

  4. 【转】android webview设置内容的字体大小

    Enum for specifying the text size. SMALLEST is 50% SMALLER is 75% NORMAL is 100% LARGER is 150% LARG ...

  5. web中纯java获取配置文件中的数据

    /*********获取配置文件,但配置文件中的值改变,不会随着值的改变也获取的参数值改变**********/  /**   * 原因是因为,类装载,装载完后,不会再去装载了   * *///  I ...

  6. 一个小团队TDD游戏及实践

    介绍的这个游戏是自己根据目前带的团队的实际情况来制定的, 在游戏实践过程中,收到了较好的效果,故打算把这个游戏分享出来,一是分享一下实践,而是集思广益,不断完善,更好的利用游戏来锻炼队伍.下面就将游戏 ...

  7. SugarSync的API总结

    SugarSync API App支持SugarSync网盘的前提: 1.AccessKeyID:xxx 2.Private Access Key:xxx 3.AppID:xxx 详细的API总结如下 ...

  8. codeforces #275 div2题解

    A题大意: 给你l,r,问你在l~r之间,是否存在 a和b互质 , b和c互质 ,但是 a,c不互质 的情况:其中l<=a<b<c<=r;如果存在,就输出a,b,c;不存在就输 ...

  9. GTK、KDE、Gnome、XWindows 图形界面

    一.linux图形界面的实现只是linux下的应用程序实现图形界面(GUI)并不是linux的一部分,linux只是一个基于命令行的操作系统,linux和Xfree的关系就相当于当年的DOS和Wind ...

  10. DIV+CSS命名参考

    用了一段CSS布局设计网页,发现自己的命名有点混乱,完全按照自己的想法命名,虽然没什么影响,有不给别人看源文件,但是工作室有时候和团队合作完成项目的时候,就遇到麻烦了,要修改一个地方相当的费事.所以还 ...