在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. e2e 自动化集成测试 环境搭建 Node.js Selenium WebDriverIO Mocha Node-Inspector

    Node.js已经出来了许多年载,至今才开始接触.周未在家闲来无事,一时心血来潮,Google了大量的文章,经过实验,终于可以把整个环境给搭起来, 废话不多话,请看步骤. 特别注意, 本文章是针对Wi ...

  2. 【译】 AWK教程指南 附录B-Actions

    Actions 是由下列指令(statement)所组成: 表达式 ( 函数调用,赋值...) print 表达式列表 printf( 格式化字符串, 表达式列表) if( 表达式 ) 语句 [els ...

  3. [原]SyntaxHighlighter使用笔记

    [Date]2013-09-21 [Environment]SyntaxHighlighter 3.0.83 [Author]wintys (wintys@gmail.com) http://wint ...

  4. MMU(what,how,todo)

    出处:http://www.100ask.org/bbs/forum.php?mod=viewthread&tid=11580&fromuid=5490 正文黑色,代码蓝色,重点标红. ...

  5. Petshop学习第三天

    ASP.NET缓存 ASP.NET充分利用缓存机制,通过某种方法,将系统需要的数据对象.Web页面存储在内存中,使得Web站点需要这些数据时,不经过繁琐的数据库连接.查询和复杂的逻辑运算,就可以触手可 ...

  6. Mac java环境配置

    进入命令行 cd ~ touch .bash_profile vi .bash_profile 输入内容jdk变量配置内容: export JAVA_HOME=/Library/Java/JavaVi ...

  7. 【转】Mybatis Generator最完整配置详解

    本文转简书:http://www.jianshu.com/p/e09d2370b796 --> --> <!-- 自动识别数据库关键字,默认false,如果设置为true,根据Sql ...

  8. eclipse配置struts.xml自动提示

    a)window – preferences – xml - xml catalog –> add  b)选择key type为URI c)key: http://struts.apache.o ...

  9. 新手学习 Vim 的五个技巧

    多年来,我一直想学 Vim.如今 Vim 是我最喜欢的 Linux 文本编辑器,也是开发者和系统管理者最喜爱的开源工具.我说的学习,指的是真正意义上的学习.想要精通确实很难,所以我只想要达到熟练的水平 ...

  10. Java网络编程(UDP协议:发送端)

    package WebProgramingDemo; import java.io.IOException; import java.net.DatagramPacket; import java.n ...