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. Codeforces Round #485 (Div. 2) C题求三元组（思维）

    C. Three displays time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  2. zepto和jquery关于获取css样式的试用差别

    例如 获取 html标签的 字体大小, zepto中方法:$("html").css( "font-size" ); jquery中方法:$("htm ...

  3. [学习] SpringMVC/JavaEE/JavaSE

    浅谈@RequestMapping @ResponseBody 和 @RequestBody 注解的用法与区别 几个Map集合的区别 Java多线程

  4. 七、在U-boot中让LCD显示图片

    1. 增加Nandflash读取代码 因为要显示图片,而图片明显是放在Nandflash中比较合适,因此需要有能够操作Nandflash的函数.在U-boot中已经有能操作Nandflash的函数了, ...

  5. 初识linux------用户和用户组

    事先说明 本Linux的版本为Ubuntu. 为避免一些初学者由于权限问题特此事先说明,在非root权限下时,所有的代码加sudo:如下 (1)不在root权限 sudo useradd -m 用户名 ...

  6. Vuex的学习笔记一

    以下的解释,是在知乎看到的,感觉粗俗易懂. 组件之间的作用域独立,而组件之间经常又需要传递数据. A 为父组件,下面有子组件 B 和 C. A 的数据可以通过 props 传递给 B 和 C.A 可以 ...

  7. 开发者用的linux系统推荐

    开发者对操作系统的4个需求 俗话说,吃什么补什么.一个开发者(也可以叫“程序员”)需要具备4个特色:办事利索(性能).相貌平平拒绝杀马特(外观).消化能力优秀(易安装).知识技能储备雄厚(软件多),所 ...

  8. Java实现循环链表

    本案例需要完成的任务定义如下:实现一个循环链表(单链表),具备增加元素.删除元素.打印循环链表等功能. 网上许多同类问题的实现方式过于复杂.难懂,本文旨在提出一种实现循环链表的简单.易懂的方法. 定义 ...

  9. 【转载】 强化学习（六）时序差分在线控制算法SARSA

    原文地址: https://www.cnblogs.com/pinard/p/9614290.html ------------------------------------------------ ...

  10. 调整Windows XP 输入法顺序

    執行 Regedit.exe 至 HKEY_CURRENT_USER＼Keyboard Layout＼Preload 調整輸入法順序,右邊欄中名稱為 1 的鍵值就是內定的輸入法,其值一般為 00000 ...