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. 201621123001 《Java程序设计》第10周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集 异常 1. 常用异常 结合题集题目7-1回答 1.1 自己以前编写的代码中经常出 ...

  2. suse_linux 11 sp3 安装 was7

    1.安装操作系统 suse linux 11 1.创建虚拟机 2.下一步 3.稍后安装操作系统,下一步 4.选择操作系统 5.选择存储目录 6.下一步 7.完成 8.编辑虚拟机 9.内存1G,CD/D ...

  3. 51nod1009

    给定一个十进制正整数N,写下从1开始,到N的所有正数,计算出其中出现所有1的个数.   例如:n = 12,包含了5个1.1,10,12共包含3个1,11包含2个1,总共5个1. Input 输入N( ...

  4. <HBase><Scan>

    Overview The Scan operation for HBase. Scan API All operations are identical to Get with the excepti ...

  5. day 50 JS框架基础

    一 JavaScript的历史1 Netscape(网景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0产品中开发出一套livescript的脚本 ...

  6. mysql创建用户并授予权限

    MySQL创建数据库与创建用户以及授权   1.create schema [数据库名称] default character set utf8 collate utf8_general_ci;--创 ...

  7. Could not open JDBC Connection for transaction

    Could not open JDBC Connection for transaction; nested exception is java.sql.SQLTransientConnectionE ...

  8. Java使用HttpClient上传文件

    Java可以使用HttpClient发送Http请求.上传文件等,非常的方便 Maven <dependency> <groupId>org.apache.httpcompon ...

  9. 堆&栈

    Java内存分为两种:堆内存和栈内存. 一些基本类型的变量和对象的引用变量都是在函数的栈内存中分配.当超过变量的作用域后,java会自动释放掉为该变量分配的内存空间.堆内存用于存放由new创建的对象和 ...

  10. Too much thinking! Too much annoying.

    I am now in great demand for an opportunity to yearn for, the ability to express myself, in a maximu ...