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. 矩震级Mw与地震矩M0的换算关系

    矩震级实质上就是用地震矩来描述地震的大小.地震矩是震源的等效双力偶中的一个力偶的力偶矩,是继地震能量后的第二个关于震源定量的特征量,一个描述地震大小的绝对力学量,单位为N.m(牛.米),其表达式为: ...

  2. Python的string模块

    如果要使用string模块,需要先导入该模块 import string string.ascii_lowercase  #打印所有的小写字母 string.ascii_uppercase  #打印所 ...

  3. dynamic programming：find max subarray

    public static mark dynway( ) //put or pop the books into the basket,mark the highest recorder { int ...

  4. 17 多校1 Add More Zero 水题

    Problem Description There is a youngster known for amateur propositions concerning several mathemati ...

  5. PAT乙级 1016. 部分A+B (15)

    题目传送:https://www.patest.cn/contests/pat-b-practise/1016 正整数A的“DA(为1位整数)部分”定义为由A中所有DA组成的新整数PA.例如:给定A ...

  6. Linux内核info leak漏洞

    1  Information Leak漏洞风险 从应用层软件,到hypervisor再到kernel代码,都存在Information Leak的风险.下面给出一些示例: 应用层软件:通常是应用敏感数 ...

  7. ecshop常见sql注入修复（转）

    ecshop系统部署在阿里云服务器上,阿里云提示Web-CMS漏洞: 修复方法如下: 0. /good.php 大概在第80行 $goods_id = $_REQUEST['id']; 修改为 $go ...

  8. linux测试系统使用expdp迁移数据到windos系统，11.2.0.4版本测试

    测试,使用linux 系统,迁移至windos测试系统,迁移用户scott 1.源端导出(linux) 2.传输 3.目标端导入(windows) 1.源端导出,本次使用expdp 1)创建操作系统转 ...

  9. scrapy框架持久化存储

    基于终端指令的持久化存储 基于管道的持久化存储 1.基于终端指令的持久化存储 保证爬虫文件的parse方法中有可迭代类型对象(通常为列表or字典)的返回,该返回值可以通过终端指令的形式写入指定格式的文 ...

  10. Windows在当前目录打开cmd

    /********************************************************************** * Windows在当前目录打开cmd * 说明: * ...