在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. 在生成 Visual c + + 2005年或从 DLL 文件中使用 CString 派生的类的 Visual c + +.net 应用程序时,您可能会收到 LNK2019 错误消息

    http://support.microsoft.com/kb/309801

  2. c++拼接字符串效率比较(+=、append、stringstream、sprintf)

    转自:http://www.cnblogs.com/james6176/p/3222671.html c++拼接字符串效率比较(+=.append.stringstream.sprintf) 最近写的 ...

  3. HDU-4651 Partition 整数拆分,递推

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4651 题意:求n的整数拆为Σ i 的个数. 一般的递归做法,或者生成函数做法肯定会超时的... 然后要 ...

  4. 全栈式框架的选择:MEAN or MEANS?

    说明:个人博客地址为edwardesire.com,欢迎前来品尝.本博客作为备份和引流 这两个月一直在进行sails后端开发,其中遇到的问题不断.放在研究用户访问控制矸例程上的时间太多,最后也没用弄出 ...

  5. 转载 SharePoint Foundation和SharePoint Server的区别

    SharePoint Server 2010用来取代MOSS 2007,它有标准版和企业版两个版本,使用SQL Server数据库: 早期版本中的STS或WSS在2010中更名为SharePoint ...

  6. SQL提高查询效益之in、not in、between、like等条件讲述

    在使用SQL语句查询数据库记录时,如果要查询相同的内容,有着不同的多种方法. 仍然,尽管使用多种方法可以得到相同的结果,但是,如果您使用不同的方法,在执行效益上是截然不同的.因此,我们得仔细考虑,如果 ...

  7. JavaScript要点(九)HTML DOM

    通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素. HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object M ...

  8. poj 2251 搜索

    Dungeon Master Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 13923   Accepted: 5424 D ...

  9. EntityFramework 连接数据库出错

    本文转载:http://www.cnblogs.com/shuang121/archive/2012/03/19/2406121.html 总结:选择“是”时,连接字符串的密码会暴露出来,“否”的时候 ...

  10. 淘宝IP地址查询

    官方网址:http://ip.taobao.com/index.php 相关文章: http://www.cnblogs.com/zetee/p/3482085.html http://www.cnb ...