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. android 应用程序中执行Linux 命令

    ADB 无线调试命令son = "setprop service.adb.tcp.port 5555\n" + "stop adbd\n" + "st ...

  2. 中文datepicker控件

    $(function() { $.datepicker.regional[, isRTL: !, showMonthAfterYear: !, yearSuffix: "年" } ...

  3. javascript性能优化之使用对象、数组直接量代替典型的对象创建和赋值

    1.典型的对象创建和赋值操作代码示例 var myObject = new Object(); myObject.name = "Nicholas"; myObject.count ...

  4. python 爬虫数据存入csv格式方法

    python 爬虫数据存入csv格式方法 命令存储方式:scrapy crawl ju -o ju.csv 第一种方法:with open("F:/book_top250.csv" ...

  5. Java并发容器和框架

    ConcurrentHashMap 在多线程环境下,使用HashMap进行put操作会引起死循环,导致CPU利用率近100%.因为多线程会导致HashMap的Entry链表形成环形数据结构,一旦形成环 ...

  6. SQL注入之Sqli-labs系列第二十五关（过滤 OR & AND）和第二十五A关（过滤逻辑运算符注释符）

    开始挑战第二十五关(Trick with OR & AND) 第二十五关A(Trick with comments) 0x1先查看源码 (1)这里的or和and采用了i正则匹配,大小写都无法绕 ...

  7. [转]一文读懂《梁宁·产品思维30讲》最精华内容（含全套PPT）

    http://chuansong.me/n/2294260949029 8 年前,我的主业是产品经理,产品思维改变了我认识世界的方式,让我明白司空见惯的设计,也有其底层逻辑. 几年后我接触培训.运营自 ...

  8. mastering elasticsearch

    概念: Term: 它是搜索的基本单位,其表现形式为文本中的一个词. Token: 它是单个Term在所属Field中文本的呈现形式,包含了Term内容.Term类型.Term在文本中的起始及偏移位置 ...

  9. 使用NATS替换NSQ为后台服务解耦

    简介 满世界的后台都在向微服务架构发展,我对微服务的理解是将一个复杂的业务分拆为多个服务,由多个服务协作完成一个服务:在后台微服务架构时需要考虑高可用.一致性等问题,也要考虑在实现上.编码上的复杂程度 ...

  10. HTML5的一些知识点

    1.新增很多api,比如获取用户的地理位置的window.navigator.geoloaction,history,audio,video,canvas 2.websocket;websocket是 ...