在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. Zabbix探索:网络设备监控3

    这两天主要是建立Cisco和H3C的网络设备监控模板.在建立的过程中就能明显感受到两家企业的深层次的东西. Cisco设备的CPU等信息都很好找,而且有官方的SNMP Object Navigator ...

  2. msp时钟设置程序

    吐槽一下MSP430需要明白的东西: 在430中,一个时钟周期 = MCLK晶振的倒数.如果MCLK是8M,则一个时钟周期为1/8us: 一个机器周期 = 一个时钟周期,即430每个动作都能完成一个基 ...

  3. 2014年25 款最新最棒的jQuery插件

    网络上提供了大量非常有用的 jQuery 插件,帮助大家完善网站的体验.所以我们在这里收集了 2014 年发布的,并且是非常有用的插件,希望能帮助大家找到自己需要并且喜欢的,提升网站的质量! HAMM ...

  4. 浏览器中显示视频,flash等的代码处理

    window.flashView=function(flash_url){ var html=''; html+='<div id="obj_flash_div">'; ...

  5. svn文件清理Bat脚本

    @echo On@Rem C:\Users\caoxiancc\Desktop\Ueditor-thinkphp-master\Ueditor --svn跟路径@PROMPT [Com] @for / ...

  6. MapReduce概述,原理,执行过程

    MapReduce概述 MapReduce是一种分布式计算模型,运行时不会在一台机器上运行.hadoop是分布式的,它是运行在很多的TaskTracker之上的. 在我们的TaskTracker上面跑 ...

  7. SQL2008-查询库中是否存在某表

    select   *   from   sysobjects   where   name= 'N201111B'   and   xtype= 'U'

  8. dataGridView控件--未将对象引用设置添加到对象的实例

    上篇博客中我完成了如何将控件中的数据导出到excel中dataGridView控件--导出Excel,当我成功导出后,又再次遇到了新问题---未将对象引用设置添加到对象的实例 解决办法:  1 .将代 ...

  9. AS问题解决系列1—Unable to execute DX错误

    http://my.oschina.net/1pei/blog/478968 摘要 在将一个开源Android代码import到Android Studio 1.2.2中时,解决了编译期间出现的“Un ...

  10. android驱动[置顶] 我的DIY Android之旅--驱动并控制你的Android开发板蜂鸣器

    改章节个人在深圳游玩的时候突然想到的...这几周就有想写几篇关于android驱动的博客,所以回家到之后就奋笔疾书的写出来发布了 这些天一直在想Android驱动框架层的实现,本文借助老罗教师的博客和 ...