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

例如：1普通元素

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>练习(margin重叠现象）</title>
  6.     <style>
  7.                   #test1{
  8.                       height: 100px;
  9.                       background: blue;
  10.                       margin-bottom: 50px;
  11.                   }
  12.                   #test2{
  13.                       height: 100px;
  14.                       background: green;
  15.                       margin-top:50px;
  16.                   }
  17.     </style>
  18. </head>
  19. <body>
  20.     <div id="test1"></div>
  21.  
  22.     <div id="test2"></div>
  23. </body>
  24. </html>

2，浮动元素：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>练习(margin重叠现象）</title>
  6.     <style>
  7.                   #test1{
  8.                       height: 100px;
  9.                     width: 200px;
  10.                       background: blue;
  11.                     margin-bottom: 50px;
  12.                     float: left;
  13.                   }
  14.                   #test2{
  15.                       height: 100px;
  16.                     width: 200px;
  17.                       background: green;
  18.                        float: left;
  19.                      clear: left;
  20.                       margin-top:50px;
  21.                   }
  22.     </style>
  23. </head>
  24. <body>
  25.     <div id="test1"></div>
  26.         <div id="test2"></div>
  27.  
  28. </body>
  29. </html>

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>练习(margin重叠现象）</title>
  6.     <style>
  7.                   #test1{
  8.                       height: 150px;
  9.                     width: 200px;
  10.                       background: blue;
  11.  
  12.                   }
  13.                   #test2{
  14.                       height: 50px;
  15.                     width: 50px;
  16.                       background: green;
  17.  
  18.                       margin-bottom:50px;
  19.                   }
  20.                   #test3{
  21.                     height: 50px;
  22.                     width: 50px;
  23.                     background: green;
  24.                     margin-top: 50px;
  25.                   }
  26.     </style>
  27. </head>
  28. <body>
  29.     <div id="test1">
  30.         <div id="test2"></div>
  31.         <div id="test3"></div>
  32.     </div>
  33. </body>
  34. </html>

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>练习(margin重叠现象）</title>
  6.     <style>
  7.                   #test1{
  8.                       height: 150px;
  9.                     width: 200px;
  10.                       background: blue;
  11.  
  12.                   }
  13.                   #test2{
  14.                       height: 50px;
  15.                     width: 50px;
  16.                       background: green;
  17.                       float: left;
  18.                       margin-bottom:50px;
  19.                   }
  20.                   #test3{
  21.                     height: 50px;
  22.                     width: 50px;
  23.                     background: green;
  24.                     float: left;
  25.                     clear: left;
  26.                     margin-top: 50px;
  27.                   }
  28.     </style>
  29. </head>
  30. <body>
  31.     <div id="test1">
  32.         <div id="test2"></div>
  33.         <div id="test3"></div>
  34.     </div>
  35. </body>
  36. </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. 玩转X-CTR100 | STM32F4 l X-Assistant串口助手控制功能

    我造轮子,你造车,创客一起造起来!塔克创新资讯[塔克社区 www.xtark.cn ][塔克博客 www.cnblogs.com/xtark/ ]      X-CTR100控制器配套的X-Assis ...

  2. springMVC拦截css与js等资源文件的解决

    写了一个demo的ssm,使用jetty容器跑的,但是在页面的时候总是发现访问资源出现404. 换了多种写法不见效. 偶然发现日志中请求被springMVC拦截了,气死我了. 解决方式: Spring ...

  3. fk makefile文件的一些问题

    除了要按具神说的makefile修改之外,还发现了另外一个问题: 不然就改成SACLIB=-L/usr/local/sac/lib

  4. api中locale或language字段，传送客户端地域信息，一般为下划线

    在请求新闻的分类信息和新闻内容时,需要在api地址中传入local参数,根据用户地区不同返回不同的新闻和分类. local参数,通过navigator.languages[0]获取, 但是,问题来了: ...

  5. shelly - HYMN TO INTELLECTUAL BEAUTY

    HYMN TO INTELLECTUAL BEAUTY III No voice from some sublimer world hath ever ⁠To sage or poet these r ...

  6. 4-log4j2之切分日志文件

    一.添加maven依赖 <dependencies> <dependency> <groupId>org.apache.logging.log4j</grou ...

  7. WPA3在2018年为无线安全添砖加瓦

    Wi-Fi Alliance Announces WPA3, the Successor to Wi-Fi's WPA2 Security Protocol The Wi-Fi Alliance -- ...

  8. ORACLE异常处理及函数

    有三种类型的异常错误 :预定义 ( Predefined )错误 ORACLE预定义的异常情况大约有24个.对这种异常情况的处理,无需在程序中定义,由ORACLE自动将其引发. 非预定义 ( Pred ...

  9. 电脑快捷键与JAVA关键字、运算符

    电脑快捷键: Alt+ESC切换到上一个操作的窗口 Alt+F4关闭当前窗口 Print Screen截取当前全屏幕到剪切板 Alt+Print Screen截取当前窗口到剪切板 Alt+Shift在 ...

  10. 效率生产力工具 —— idea 插件

    maven helper: 打开该pom文件的Dependency Analyzer视图(在文件打开之后,文件下面会多出这样一个tab), 进入Dependency Analyzer视图之后有三个查看 ...