1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style type="text/css">
  7.         .div{
  8.           /*  overflow: hidden;*//*利用该属性或者通过给父级元素设置border可以避免出现父级元素的margin合并的情况，当没有设置这两个属性之一时，该div的margin-top值会取div1的margin-top和其自身margin-top的最大值*/
  9.          /* border:1px solid red;*/
  10.             margin:0 auto;
  11.             margin-top:10px;
  12.             width:300px;
  13.             background: #aaa;
  14.  
  15.         }
  16.         .div1{
  17.             width:200px;
  18.             height:200px;
  19.             background: red;
  20.             margin:20px 0px;
  21.         }
  22.         .div2{
  23.             width:200px;
  24.             background: green;
  25.             margin: 10px 0px;
  26.             height:200px;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31. <div class="div">
  32.     <div class="div1"></div>
  33.     <div class="div2"></div>
  34. </div>
  35.  
  36. </body>
  37. </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. C/C++学习路线图

    文章转载自「开发者圆桌」一个关于开发者入门.进阶.踩坑的微信公众号 这里整理的C/C++学习路线图包含初中高三个部分,你可以通过百度云盘下载观看对应的视频 链接: http://pan.baidu.c ...

  2. osprofiler在openstack Cinder里的使用

    最近在做OpenStack Cinder driver的性能调试, 之前一直是通过在driver里面加入decorator,完成driver各个接口的执行时间的统计. 其实在openstack,已经在 ...

  3. react router路径的匹配原则

    路由匹配规则是从上到下执行,一旦发现匹配,就不再其余的规则了. (1):paramName :paramName匹配URL的一个部分,直到遇到下一个/.?.#为止.这个路径参数可以通过this.pro ...

  4. 最短路径之Dijkstras算法(图片格式)

  5. ICC_lab总结——ICC_lab2：设计规划

    PS:字丑,禁止转载!!! 首先先写出大概的流程,然后是一些教材的理论知识总结,最后是进行lab2的一些流程概述. 教材的理论知识总结主要是:数字集成电路物理设计学习总结--布图规划和布局 --> ...

  6. SQL Server跨数据库 增删查改

    比如你在库A ,想查询库B的表.可以用 数据库名.架构名.表名的方式查询 select * from 数据库B.dbo.表1 也可以在存储过程中这样使用. 需要注意的是,如果使用这样的查询方式,你必须 ...

  7. Java核心编程快速学习

    Java核心编程部分的基础学习内容就不一一介绍了,本文的重点是JAVA中相对复杂的一些概念,主体内容如下图所示. 反射reflect是理解Java语言工作原理的基础,Java编译器首先需要将我们编写的 ...

  8. iOS回顾笔记（09） -- Cell的添加、删除、更新、批量操作

    iOS回顾笔记(09) -- Cell的添加.删除.更新.批量操作 项目中经常有对UITableViewCell做各种操作的需求: 添加一个新的cell 删除某行cell 刷新cell上某行数据(如修 ...

  9. 急速搭建SuperMap iCloudManager for Docker环境

    大家好,SuperMap iCloudManager 是超图的 GIS 云管理系统,它是出色的云GIS平台的大管家. 它很简单,部署操作都很简单. 它很智能,可以实时监控 GIS 业务环境的 CPU ...

  10. GWT开端

    这篇文章是转载的,原地址:GWT开端 以前的基于GWT的项目中广泛使用的还是gwt-windows-1.5.3这个版本的. 1.下载地址:http://code.google.com/webtoolk ...