<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        .div{

          /*  overflow: hidden;*//*利用该属性或者通过给父级元素设置border可以避免出现父级元素的margin合并的情况，当没有设置这两个属性之一时，该div的margin-top值会取div1的margin-top和其自身margin-top的最大值*/

         /* border:1px solid red;*/

            margin:0 auto;

            margin-top:10px;

            width:300px;

            background: #aaa;

        }

        .div1{

            width:200px;

            height:200px;

            background: red;

            margin:20px 0px;

        }

        .div2{

            width:200px;

            background: green;

            margin: 10px 0px;

            height:200px;

        }

    </style>

</head>

<body>

<div class="div">

    <div class="div1"></div>

    <div class="div2"></div>

</div>

</body>

</html>

一、在div里面有子元素div1时，div在没有设置overflow：hidden或者是border属性时，div的margin-top的值为div/div1中的margin-top的最大值。上面的结果如图：

注意：div1在div中的margin-top值为0px;

二、当父级div设置了上述属性中的一个时（如overflow：hidden），结果如下图所示：

div的margin-top值为其自身设置的值10px，同时div1的margin-top值也是正常的20px

三、当元素是兄弟元素时，在不设置float和position:absolute时margin-bottom和margin-top会自动的合并为两者中的最大值。如上面的div1和div2两者之间的margin距离为20px;当两者同时设置了float：Left时，两者之间的margin值是30px,如图所示：

设置float前：                                                                                                      设置float后

                                        

margin外边距合并问题以及解决方式的更多相关文章

  1. 转载：margin外边距合并问题以及解决方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 关于margin外边距合并的问题

    一 .兄弟元素margin外边距合并演示   当两个垂直方向相邻的兄弟元素都为常规流块盒,他们之间垂直方向的外边距不是两者之和,而是取两者中的最大值.这种现象被称为相邻的兄弟元素垂直方向外边距合并. ...

  3. 为什么margin-top不是作用于父元素【margin外边距合并问题】

    coding时发现margin-top居然没作用于本元素上,而是作用到了父元素上. 原来是margin外边距合并导致的.以下是网上搬运来的知识: margin外边距合并详解:外边距合并现象在网页布局中 ...

  4. margin 外边距合并问题

    一.兄弟元素的外边距合并 效果图如下:(二者之间的间距为100px,不是150px) 二.嵌套元素的外边距合并 对于两个嵌套关系的元素,如果父元素中没有内容或者内容在子元素的后面并且没有上内边距及边框 ...

  5. CSS Margin外边距合并

    应该知道这点东西的!!! 可是偏偏记不住! 外边距合并会发生在以下两种情况下: 1 垂直出现的两个拥有外边距的块级元素. div1 { margin-bottom: 20px; } div2 { ma ...

  6. 关于collapsed margin（外边距合并）

    这是前面写postion定位时写到最后面的例子的时候发现的一个问题,于是专门写一篇随笔来解释记录一下,毕竟两个知识点同时写在一篇文章里面有点混乱的感觉.. 上篇随笔position定位遇到的问题在这里 ...

  7. CSS 垂直外边距合并：规范、延伸、原理、解决办法

    <CSS 权威指南>第七章基本视觉格式化.p192,提到了 垂直外边距合并 的情况,解释总体算清晰,但是感觉不全且没有归纳成一条一条的,参考 CSS框模型中外边距(margin)折叠图文详 ...

  8. “margin塌陷” 嵌套盒子外边距合并现象

    来源于官方文档对于外边距合并的解释: 注释:只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 出现外边距塌陷的三种情况: 1.相邻兄弟元素之间 若两者 ...

  9. CSS min-height不能解决垂直外边距合并问题

    垂直外边距合并有一种情况是嵌套元素的垂直外边距合并,当父级元素没有设定外边距时,在顶部或者底部边缘的子元素的垂直外边距就会和父级的合并,导致父级也有了“隐形”的垂直外边距. 当父级元素的min-hei ...

随机推荐

  1. 迷茫<第一篇：初到北京>

    时光如梭,毕业四年了,遥想当年刚毕业的场景就像是昨天发生一样,这四年的人生,就是在不停的漂泊,不断的受挫.感慨良多,一言难以说尽.  2013年11月29号毕业,刚到北京的第二天我就顺利的找到了工作, ...

  2. 队列工厂之RabbitMQ

    本次和大家分享的是RabbitMQ队列的用法,前一篇文章队列工厂之(MSMQ)中在描述的时候已经搭建了简单工厂,因此本章内容是在其之上扩充的子项不再过多讲解工厂的代码了:RabbitMQ应该是现在互联 ...

  3. 提交任务到Spark

    1.场景 在搭建好Hadoop+Spark环境后,现准备在此环境上提交简单的任务到Spark进行计算并输出结果.搭建过程:http://www.cnblogs.com/zengxiaoliang/p/ ...

  4. iOS开发之类扩展

    在以往写代码时,我们经常是把声明写在.h文件中,把实现写在.m文件中,但是在实际开发中,如果把声明写在.h文件中会暴露程序很多属性(成员变量.成员变量的get和set方法),为了安全考虑,引入了类扩展 ...

  5. js原生API----查找dom

    一.祖先接口Node,及他的扩展接口EventTarget Node是一个接口,许多DOM类型从这个接口继承,并允许类似地处理(或测试)这些各种类型. 以下接口都从Node继承其方法和属性: Docu ...

  6. centos6.5 源码安装 gtk 环境

    解决 No package 'gtk+-2.0′ found问题方法:yum install libgnomeui-devel 执行了上面的,下面的就可以放弃了,yum 大法好 首先 yum 安装下面 ...

  7. 深入hibernate的三种状态

    学过hibernate的人都可能都知道hibernate有三种状态,transient(瞬时状态),persistent(持久化状态)以及detached(离线状态),大家伙也许也知道这三者之间的区别 ...

  8. Java日期格式化方法

    首先获取当前系统时间的方法有两种:第一种可以用currentTimeMillis()方法获取,它其实产生的是一个当前的毫秒数,这个毫秒是自1970年1月1日0时起至现在的毫秒数,类型是long 型,可 ...

  9. WebStorm里启动electron项目

    WebStorm里启动electron项目,其实很简单 一.第一步打开下面的窗口 二.然后输入electron .,然后敲下 回车键,然后等会项目界面就会出现了. PS:electron 和 点之间有 ...

  10. Android线程池使用终结版

    有一段时间没写博文了,今天抽空总结一下,也希望能通过自己写的这些文章,加深理解的同时能帮 助在技术方面有疑点的朋友搞清楚个所以然来,由于经常会在网上或群里看到有朋友会问线程方面的 东西,就像我一个朋友 ...