有两个有嵌套关系的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. .net操作PDF的一些资源(downmoon收集)

    因为业务需要,搜集了一些.net操作pdf的一些资源,特在此分享. 1.如何从 Adobe 可移植文档格式 (PDF) 文件中复制文本和图形 http://support.microsoft.com/ ...

  2. C#可扩展编程之MEF

    C#可扩展编程之MEF学习笔记(四):见证奇迹的时刻 前面三篇讲了MEF的基础和基本到导入导出方法,下面就是见证MEF真正魅力所在的时刻.如果没有看过前面的文章,请到我的博客首页查看. 前面我们都是在 ...

  3. CentOS 5.8安装SugarCRM 6.5版本

    环境:CentOS 5.8,安装了Asterisk 1.8 升级php到5.2SugarCRM 6.5:  Minimum PHP version required is 5.2.0. You are ...

  4. 开发使用混合式Winform模块

    开发使用混合式Winform模块 1.Winform数据访问模式定义 传统的Winform程序模块:用于传统的数据库通讯获取数据,这种方式获取数据,方便快捷,可以用于常规的业务系统的场景,用于单机版软 ...

  5. Linq无聊练习系列2--select/distinct练习

    void dataBindByWhere()        { /**************select/distinct 练习*******************/            //获 ...

  6. JS数量输入控件

    JS数量输入控件 很早看到kissy首页 有数量输入控件,就随便看了下功能 感觉也不怎么难 所以也就试着自己也做了一个, 当然基本的功能和他们的一样,只是用了自己的编码思想来解决这么一个问题.特此给大 ...

  7. 自承载Web API

    自承载Web API 前言 阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http://www.cnblogs.com/aehyok/p/3446289.html As ...

  8. c#实现Google账号登入授权(OAuth 2.0)并获取个人信息

    c#实现Google账号登入授权(OAuth 2.0)并获取个人信息   此博主要介绍通过google 账号(gmail)实现登入,授权方式OAuth2.0,下面我们开始介绍. 1.去google官网 ...

  9. Azure的两种关系型数据库服务:SQL Azure与SQL Server VM的不同

    Azure的两种关系型数据库服务:SQL Azure与SQL Server VM的不同 <Windows Azure Platform 系列文章目录> 如果熟悉Windows Azure平 ...

  10. LIS 最长递增子序列问题

    一,    最长递增子序列问题的描述 设L=<a1,a2,…,an>是n个不同的实数的序列,L的递增子序列是这样一个子序列Lin=<aK1,ak2,…,akm>,其中k1< ...