1.上下/左右相邻的普通元素margin，不是两者相加之和，而是取最大值，这个现象叫做margin重叠。 
2. 普通元素才会发生margin重叠，如果是float元素，就不会发生。margin是两者相加之和。

例如：1普通元素

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>练习(margin重叠现象）</title>

    <style>

                  #test1{

                      height: 100px;

                      background: blue;

                      margin-bottom: 50px;

                  }

                  #test2{

                      height: 100px;

                      background: green;

                      margin-top:50px;

                  }

    </style>

</head>

<body>

    <div id="test1"></div>

    <div id="test2"></div>

</body>

</html>

2，浮动元素：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>练习(margin重叠现象）</title>

    <style>

                  #test1{

                      height: 100px;

                    width: 200px;

                      background: blue;

                    margin-bottom: 50px;

                    float: left;

                  }

                  #test2{

                      height: 100px;

                    width: 200px;

                      background: green;

                       float: left;

                     clear: left;

                      margin-top:50px;

                  }

    </style>

</head>

<body>

    <div id="test1"></div>

        <div id="test2"></div>

</body>

</html>

3,父子（普通元素）发生margin重叠现象

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>练习(margin重叠现象）</title>

    <style>

                  #test1{

                      height: 150px;

                    width: 200px;

                      background: blue;

                  }

                  #test2{

                      height: 50px;

                    width: 50px;

                      background: green;

                      margin-bottom:50px;

                  }

                  #test3{

                    height: 50px;

                    width: 50px;

                    background: green;

                    margin-top: 50px;

                  }

    </style>

</head>

<body>

    <div id="test1">

        <div id="test2"></div>

        <div id="test3"></div>

    </div>

</body>

</html>

4，父子（子为浮动元素）不发生margin重叠

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>练习(margin重叠现象）</title>

    <style>

                  #test1{

                      height: 150px;

                    width: 200px;

                      background: blue;

                  }

                  #test2{

                      height: 50px;

                    width: 50px;

                      background: green;

                      float: left;

                      margin-bottom:50px;

                  }

                  #test3{

                    height: 50px;

                    width: 50px;

                    background: green;

                    float: left;

                    clear: left;

                    margin-top: 50px;

                  }

    </style>

</head>

<body>

    <div id="test1">

        <div id="test2"></div>

        <div id="test3"></div>

    </div>

</body>

</html>

margin重叠现象的更多相关文章

  1. margin重叠现象与margin auto自适应居中

    上下相邻的(算一种兄弟关系)普通元素,上下边距并非简单的相加,而是取其中最大的边距值:而浮动的盒子边距是相加的:父子div也会发生重叠,并不是bug: <style>#test1{ wid ...

  2. margin的重叠现象

    当两个相邻的普通元素设置margin时,则它们的间距并不是简单的外边距相加. <!DOCTYPE html> <html lang="en"> <he ...

  3. 上下margin重叠传递问题

    我发现强迫症真的是我一个大病...每次都非得把所有情况都实验出来不可...BUT!!!!!!!!!悲催的是,这么多情况我根本记不住...还是要在写代码的时候不断出错再排错~受不了自己了!不过还是把这部 ...

  4. CSS 外边距(margin)重叠及防止方法

    边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大 ...

  5. css margin重叠

    父子元素margin(垂直方向)重叠 解决办法: 给子元素添加浮动属性,相应父元素添加必要的清浮动属性: 给父元素添加边缘属性,如padding.border: 同级元素margin(垂直方向)反向重 ...

  6. css中margin重叠和一些相关概念（包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes ）

    平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外 ...

  7. 2016/2/25 1， margin auto 垂直方向测试 无效 2，margin重叠 3，哪些是块状哪些是内联 4，display：block inline 导航栏把内联转块状最常见+ 扩展

    1.利用margin auto完成首页居中,并自行研究,竖直方向用margin auto,是什么效果#container{width:1002px;margin: 0px auto;}    竖直方向 ...

  8. margin重叠与穿透问题

    margin重叠是指两个同级元素之间.margin穿透指的是,子元素margin超出父元素而未被父元素包含的现象. 出现margin重叠的原因: 同一个BFC里面两个块级元素会出现margin折叠. ...

  9. margin塌陷现象

    如果两个盒子是包含关系,如果让子盒子在父盒子之内向下平移100px:(margin塌陷现象)解决方案: padding , border , overflow <!DOCTYPE html> ...

随机推荐

  1. IE浏览器兼容的处理方式之一,使用特殊的注释 <!--[if IE]> ....<![endif]-->

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

  2. js 自执行匿名函数(转载)

    自执行匿名函数: 常见格式:(function() { /* code */ })(); 解释:包围函数(function(){})的第一对括号向脚本返回未命名的函数,随后一对空括号立即执行返回的未命 ...

  3. excel idea sql 操作

    1.excel  concatenate()函数中连接单元格中值拼接sql时,内容超长,把insert into.... values()前面的单独提出来,只在concatenate()中拼接valu ...

  4. 【Python】xml遍历练习

      <?xml version="1.0" encoding="utf-8" ?> <!--this is a test about xml. ...

  5. 【转】如何在win10（64位系统）上安装apache服务器

    如何在win10(64位系统)上安装apache服务器 今天装了Apache服务器,下面是我总结的方法: 一,准备软件 1.64位的apache版本 传送门:http://www.apacheloun ...

  6. lvm创建和快照

    查看磁盘 创建分区 新建1G的1分区 新建1G的2分区 新建1G的3分区 查看新建的分区 因标准分区是83交换分区是82做lv是8e所以要改变类型 查看: 保存退出: 创建物理卷pv 将物理卷pv创建 ...

  7. lintcode 刷题 by python 部分链表题总结（2）

    本篇博客对最近做的链表的算法题做个简单的小结,主要描述题目和提供解题思路,具体代码见我的 github:https://github.com/MUSK1881/lintcode-by-python 3 ...

  8. pip install GitHub package

    /********************************************************************************* * pip install Git ...

  9. 搜索入门_简单搜索bfs dfs大杂烩

    dfs题大杂烩 棋盘问题  POJ - 1321 和经典的八皇后问题一样.  给你一个棋盘,只有#区域可以放棋子,同时同一行和同一列只能有一个棋子. 问你放k个棋子有多少种方案. 很明显,这是搜索题. ...

  10. Unity 3D还原Scene场景、市面多数游戏视角高度自定义、第三人称视角分离功能：平移、拖动、看向中心等

    Unity视角的高度自定义 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享. ...