在web开发过程中,有些情况下给内层div设置的margin却被莫名奇妙的转移给了外层div。百度之后,发现它竟然是css2.1中盒模型中规定的内容:

In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin. 所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为:同级或者嵌套的盒元素,并且它们之间没有非空内容、Padding或Border分隔。

解决办法:
    1.给父元素添加 overflow:hidden; 属性。
    2.或者给父元素添加 padding-top 属性,属性值为要设定的margin 值。

div嵌套内层div的margin-top转移给外层div的解决办法的更多相关文章

  1. 嵌套div中margin-top转移问题的解决办法

    在这两个浏览器中,有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-bottom的值会“转移”给外层div. <!DOCT ...

  2. div嵌套引起的内层margin-top对外层div起作用

    嵌套div中margin-top转移问题的解决办法在这两个浏览器中,有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-botto ...

  3. HTML中div嵌套div的margin不起作用

    下面介绍一下div嵌套div时margin不起作用的解决方案. 顺便科普下margin的定义和用法. div嵌套的HTML代码: <!DOCTYPE html> <html lang ...

  4. div嵌套导致子区域margin-top失效不起作用的解决方法

    有两个嵌套关系的div,如果外层div的父元素padding值为0, 那么内层div的margin-top或者margin-bottom的值会"转移"给外层div,使父元素产生上外 ...

  5. div嵌套引起的margin-top不起作用(转)

    嵌套div中margin-top转移问题的解决办法在这两个浏览器中,有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-botto ...

  6. IE中float元素如果同时设置了margin值,此时margin的值会变为双倍的解决方法

    IE中float元素如果同时设置了margin值,此时margin的值会变为双倍, 解决办法: 是在该元素中加入display:inline.

  7. DIV的Position属性和DIV嵌套DIV

    1.前言 我们在利用div+css进行布局时,常常被div的位置弄的焦头烂额,很多人甚至放弃了div而直接用table.这里一如既往的推荐使用div布局,其实我们只要掌握了div的position属性 ...

  8. div嵌套引起的margin-top不起作用

    通常大家在制作网页的过程中会遇到很多棘手的问题,比如我在写一个页面的时候,遇到了div嵌套引起的margin-top不起作用,对内部的div设置margin-top时,内部对于外部的div并没有产生一 ...

  9. 内层div的margin-top影响外层div——引出外边距合并Collapsing margins

    内层div的margin-top影响外层div——引出外边距合并Collapsing margins 作者:zccst 今天才算是了解边距合并.正如一位前辈所言,每一个CSS的坑,都让你学到不少知识. ...

随机推荐

  1. C#编写 "Hello,Word!" 您的第一个程序。

    教程 下面的示例展示编写C#“Hello World”程序的几种不同的方法. 示例 1 //Hello1.cs public class Hello1 { public static void Mai ...

  2. Linux创建公钥

    A:192.168.1.1  B:192.168.1.2 现在想让A无密码登陆B机器 A上运行以下命令来生成公钥和私钥 ssh-keygen -t rsa -P '' 运行该命令后会生成如下两个文件 ...

  3. 特效TD 的工作准则

    特效 TD 的工作准则 作者:Hammer Chen / 转载自 http://hammerbchen.blogspot.com/2013/07/vfx-td-td.html 一直以来都想写这样的文章 ...

  4. gSoap的 “error LNK2001: 无法解析的外部符号 _namespaces”解决方法

    gSoap是C/C++开发webService服务第三方的公开类库. 出现上述错误是因为缺少必要的头文件导致的. 在用wsdl2h生成头文件的时候,一并生成了类似 xx.nsmap 的文件,这个文件实 ...

  5. 未能加载文件或程序集“WcfService”或它的某一个依赖项。试图加载格式不正确的程序。

    “/”应用程序中的服务器错误. 未能加载文件或程序集“WcfService”或它的某一个依赖项.试图加载格式不正确的程序. 说明: 执行当前 Web 请求期间,出现未经处理的异常.请检查堆栈跟踪信息, ...

  6. SMG12232A2标准图形点阵型液晶显示模块的演示程序[C51编程语言]

    //SMG12232A2标准图形点阵型液晶显示模块的演示程序[C51编程语言][MCS51总线接口方式] //应用产品: SMG12232A2标准图形点阵型液晶显示模块 // 本演示程序适用于SMG1 ...

  7. bzoj 2815 [ZJOI2012]灾难(构造,树形DP)

    [题意] 求把每个点删除后,不可达点的数目. [思路] 构造一棵“灭绝树”,要求这棵树满足如果删除根节点后则该子树内的所有结点都不可达.则答案为子树大小-1. 如何构造这棵“灭绝树”? 将原图拓扑排序 ...

  8. NOIP2011 计算系数

    1计算系数 给定一个多项式 (ax + by)k ,请求出多项式展开后 x n y m 项的系数. [输入] 输入文件名为 factor.in. 共一行,包含 5 个整数,分别为 a,b,k,n,m, ...

  9. k-近邻分类的Python实现

    参见<机器学习实战> # -*- coding:cp936 -*- #=========================================================== ...

  10. IComparer接口与

    IComparable比较接口,继承此接口可对lis<T>调用sort进行排序 或者调用sort时可以为sort方法提供继承了IComparer的比较器