<!doctype html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>嘿嘿嘿</title>

         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">

     </head>

     <style type="text/css">

         body{

             background: #f5f5f5;

         }

         .father-box{

             width: 150px;

             height: 150px;

             background-color: black;

             margin: 20px;

         }

         .father-box .son-box{

             width: 50px;

             height: 50px;

             background-color: greenyellow;

             margin: 20px;

         }

         .brother-two{

             width: 150px;

             height: 20px;

             background-color: gold;

             margin: 20px;

         }

     </style>

     <body>

         <div class="father-box brother">

             <div class="son-box">

             </div>

         </div>

         <div class="brother brother-two">

             黄色的是20px的高度

         </div>

     </body>

 </html>

例子代码

结果为：

上面执行的代码可以看到两个经典的cssbug:

father-box ：黑色盒子；son-box：绿色盒子；brother-two：黄色盒子

1、margin合并

黑色 和 黄色的盒子 都设置了 margin:20px， 按理说黑色和黄色的垂直间距是40px,  但是事实是20px, 这就是margin合并造成的。

margin合并：普通文档流中块级元素的垂直外边距会互相合并，也就是会以他们之间外边距大的为准，比如：

我如果现在将黄色的盒子的margin-top设为10px;黄色和黑色之间的间距不会改变，依旧是20px;但是如果设为30px,那么黄色和黑色之间的间距就会以较大的30px为准，变为30px;

解决方法：

推荐也是常用的：如果要上下间距为40px,只需要黄色的盒子上边距设为40px,黑色的盒子不用设下边距，这样就可以了，意思是不需要强行解决这个bug,只需要将一边的边距设为两个盒子边距的和就可以了

不推荐也是不常用的（这样会改变html结构）：在黄色和黑色的盒子外面在加一个盒子，让这个加的外层盒子的渲染规则改为BFC（https://www.cnblogs.com/xingyue525/p/10924882.html）

2、margin 塌陷

黑色 和 绿色 的margin-top都设为了20px，但是绿色并没有距离黑色上边20px。

margin 塌陷：普通文档流中父子块级元素，如果父元素没有设置上内边距或上边框，子元素的上边距就会和父元素的上边距重合，以他们两个中间最大上边距为准，与距离他们最近的盒子隔开。如:

如果我现在给绿色的盒 子设置margin-top:40px, 那么黑色和绿色的盒子会一起向下移动20px。

解决方法：

将父元素的渲染规则改为BFC（https://www.cnblogs.com/xingyue525/p/10924882.html）

这里简单的列举一些触发BFC的方法：

1、float:left/right;

2、position:absolute;

3、overflow:hidden;

4、display:inline-block;

解决margin塌陷和margin合并的更多相关文章

  1. margin塌陷与margin合并（margin），清除浮动

    **1.margin塌陷**问题:垂直方向的父子关系的盒子使用不当会产生margin塌陷.给子级设置margin-top时,他不会相对父级一起动,只有他的margin超过父级的margin时,才会生效 ...

  2. margin塌陷和margin合并问题及解决方案

    margin塌陷 先举个例子 <style> body{ background-color:#000; } .wrapper{ width:200px; height:200px; bac ...

  3. 12-[CSS]-margin塌陷，margin 0 auto,善用父级的padding

    1.margin塌陷 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  4. 林大妈的CSS知识清单（二）可见格式化模型（内含margin塌陷与浮动闭合的解决方案）

    盒模型.浮动和定位是CSS中最重要的三个概念.它们共同决定了一个元素在页面中以怎样的形式进行排布与显示. 一.盒模型 1. 定义 盒模型是CSS的核心概念.一个页面中,所有的元素(不管他最终显示是圆形 ...

  5. “margin塌陷” 嵌套盒子外边距合并现象

    来源于官方文档对于外边距合并的解释: 注释:只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 出现外边距塌陷的三种情况: 1.相邻兄弟元素之间 若两者 ...

  6. margin的两个有趣现象：margin合并和margin塌陷

    margin合并 当两个元素在垂直方向并列,分别设置margin值时会发生一个margin合并的现象 举个例子,有两个div,垂直并列,box1设置margin-bottom:20px,box2设置m ...

  7. 学习笔记------------解决margin塌陷

    首先来解释一下什么是marg塌陷? 父子嵌套元素垂直方向的margin,父子元素是结合在一起的,他们两个会取其中最大的值 正常情况下应该是父级元素相对于浏览器定位,而子级元素相对于父级元素定位 但是m ...

  8. 触发bfc解决父子元素嵌套垂直方向margin塌陷问题

    首先看一下问题案例 .wrapper{             width: 100px;             height: 100px;             background-colo ...

  9. 关于collapsed margin（外边距合并）

    这是前面写postion定位时写到最后面的例子的时候发现的一个问题,于是专门写一篇随笔来解释记录一下,毕竟两个知识点同时写在一篇文章里面有点混乱的感觉.. 上篇随笔position定位遇到的问题在这里 ...

随机推荐

  1. NOIP模拟赛 17.10.10

    初次见面(firstmeet)[题目背景]雾之湖边,静得可怕.露米娅出神凝望.黑白连衣裙,像极了绽放的墨黑和洁白的莲.身边的雾之湖,倒映着血色天空.酒红的双眸,映照一切.低声浅笑,双臂伸直,她悄无声息 ...

  2. 洛谷P1080 [NOIP2012提高组D1T2]国王游戏 [2017年5月计划 清北学堂51精英班Day1]

    P1080 国王游戏 题目描述 恰逢 H 国国庆,国王邀请 n 位大臣来玩一个有奖游戏.首先,他让每个大臣在左.右 手上面分别写下一个整数,国王自己也在左.右手上各写一个整数.然后,让这 n 位大臣排 ...

  3. 各大ACM OJ网址

    做快乐的程序员 以你的条件,你不必追求优秀,但你可以做到良好. 各大OJ网址 ACM OJ Collection(排名不分先后): 中国:(China) 华东地区: 浙江: 杭州电子科技大学(HDU) ...

  4. 对List<Map<String, Object>>集合排序

    private void mySort(List<Map<String, Object>> list) { //list为待排序的集合,按SEQ字段排序 Comparator& ...

  5. Ajax系列之二：核心对象XMLHttpRquest

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/zhanghongjie0302/article/details/31432939           ...

  6. Java连接Neo4j的两种方式

    1.Neo4j数据库的两种方式 Neo4j可以以两种方式运行: Java应用程序中的嵌入式数据库 通过REST的独立服务器 不管哪一种方式,这个选择不会影响查询和使用数据库的方式. 它是由应用程序的性 ...

  7. [Vue CLI 3] 配置解析之 css.extract

    大家还记得我们在老版本中,对于线上环境配置中会把所有的 css 多打成一个文件: 核心是使用了插件 extract-text-webpack-plugin,方式如下: 第一步都是加载插件 const ...

  8. Eclipse创建jsp web项目

    Eclipse 是一个开放源代码的.基于Java的可扩展开发平台.就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境.幸运的是,Eclipse 附带了一个标准的插件集,包括Java开 ...

  9. git命令入门

    http://www.cocoachina.com/ios/20160629/16855.html 译者序:这是一篇给像我这样的新手或者是熟悉图形工具的老鸟看的.仅作为快速入门的教程. git 现在的 ...

  10. 【JZOJ4803】【NOIP2016提高A组模拟9.28】求导

    题目描述 输入 输出 样例输入 2x^2+3x+1 样例输出 4x+3 数据范围 样例解释 求导的意思: 多项式是由若干个单项式构成的 单项式的一般形式是ax^b,其中ab都是常数,x是自变量 对于单 ...