margin的两个有趣现象：margin合并和margin塌陷
margin合并
当两个元素在垂直方向并列，分别设置margin值时会发生一个margin合并的现象
举个例子，有两个div，垂直并列，box1设置margin-bottom:20px，box2设置margin-top:50px，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
*{
margin：0;
padding: 0;
}
div{
width: 50px;
height: 50px;
}
#box1{
margin-bottom: 20px;
background: red;
}
#box2{
margin-top: 50px;
background: blue;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
按照一般的思维，这两个div之间的距离就应该是70px，事实并非如此，两个div之间的距离只有50px，因为两个div的margin重叠，它会取最大值
一般来说margin合并不常见，因为只需设置一个div的margin来达到二者之间的距离就可以了
margin塌陷
margin塌陷很常见，存在于嵌套关系的盒子之间。
有两个div，box1包含box2，给box2一个margin-top:20px，让box2和box1之间产生20px的距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
*{
margin：0;
padding: 0;
}
#box1{
width: 100px;
height: 100px;
background: red;
}
#box2{
width: 50px;
height: 50px;
margin-top: 20px;
background: blue;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
</html>
结果会发现box1和box2没产生距离，反而是box1带着box2离页面顶端20px
解决办法：
- 给父级盒子设置overflow:hidden
- 给父级盒子设置border
- 给父级盒子设置padding
margin的两个有趣现象：margin合并和margin塌陷的更多相关文章
- margin塌陷与margin合并（margin），清除浮动
**1.margin塌陷**问题:垂直方向的父子关系的盒子使用不当会产生margin塌陷.给子级设置margin-top时,他不会相对父级一起动,只有他的margin超过父级的margin时,才会生效 ...
- margin和padding那点事及常见浏览器margin padding相关Bug
用Margin还是用Padding 何时应当使用margin: 需要在border外侧添加空白时. 空白处不需要背景(色)时. 上下相连的两个盒子之间的空白,需要相互抵消时.如15px + 20px的 ...
- python---手动实现两个有序列表的合并
可能又和标准的实现不一样, 但是自己的实现, 印象就会不一样的. # coding = utf-8 # 两个有序列表的合并,将two_list合并到one_list def merge_order_l ...
- java实现两个不同list对象合并后并排序
工作上遇到一个要求两个不同list对象合并后并排序1.问题描述从数据库中查询两张表的当天数据,并对这两张表的数据,进行合并,然后根据时间排序.2.思路从数据库中查询到的数据放到各自list中,先遍历两 ...
- Python有趣现象（不定时更新）
1.list中extend方法有趣现象 1.1 List+=Str 与 List.extend(Str) list1 = [11,2,45] str1 = 'Michael' list1.extend ...
- MySQL 两个数据库表中合并数据
两个数据库表中合并数据 如果有 t1 和 t2 两个数据库表格,它们两个对应的字段是相同的.如何将 t2 的数据插入到t1中去呢? insert into t1 select * from t2 ...
- margin 依附与可见的内容，不能为margin而写margin
margin 依附于可见的内容,不能为margin而写margin <!DOCTYPE html><html><head><style> p{marg ...
- JAVA实现选择排序，插入排序，冒泡排序，以及两个有序数组的合并
一直到大四才开始写自己的第一篇博客,说来实在有点羞愧.今天写了关于排序的算法题,有插入排序,冒泡排序,选择排序,以下贴上用JAVA实现的代码: public class test5 { public ...
- css中两种居中方式text-align:center和margin:0 auto 的使用场景
关于使用text-align:center和margin:0 auto 两种居中方式的比较 前言:最近由于要学习后端,需要提前学习一部分前端知识,补了补css知识,发现狂神在讲这一部分讲的不是特别清楚 ...
随机推荐
- [机器学习] 分类 --- Naive Bayes（朴素贝叶斯）
Naive Bayes-朴素贝叶斯 Bayes' theorem(贝叶斯法则) 在概率论和统计学中,Bayes' theorem(贝叶斯法则)根据事件的先验知识描述事件的概率.贝叶斯法则表达式如下所示 ...
- Docker在Linux上运行NetCore系列（五）更新应用程序
转发请注明此文章作者与路径,请尊重原著,违者必究. 本篇文章与其它系列文章不同,为了方便测试,新建了一个ASP.Net Core视图应用. 备注:下面说的应用,只是在容器中运行的应用程序. 查看现在运 ...
- JPA、Hibernate、Spring data jpa之间的关系，终于明白了
什么么是JPA? 全称Java Persistence API,可以通过注解或者XML描述[对象-关系表]之间的映射关系,并将实体对象持久化到数据库中. 为我们提供了: 1)ORM映射元数据:JPA支 ...
- SpringBoot之前端文件管理
WebJars能使Maven的依赖管理支持OSS的JavaScript库/CSS库,比如jQuery.Bootstrap等. (1)添加js或者css库 pom.xml <dependency& ...
- .net 公共基础类
using WL.Infrastructure.Http; using System; using System.Collections.Generic; using System.IO; using ...
- mysql中的prepare介绍和应用
简单的用set或者declare语句定义变量,然后直接作为sql的表名是不行的,mysql会把变量名当作表名.在其他的sql数据库中也是如此,mssql的解决方法是将整条sql语句作为变量,其中穿插变 ...
- struts2_模型驱动
一.注意点 建立实现ModelDriven接口的action类 在该action类中,创建实体对象并new 在getModel返回该对象 在显示页面中提交的表单name正常写 二.案例 创建实体类Us ...
- 汇编语言--微机CPU的指令系统（五）（比较运算指令）
(7)比较运算指令 在程序中,我们要时常根据某个变量或表达式的取值去执行不同指令,从而使程序表现出有不同的功能.为了配合这样的操作,在CPU的指令系统中提供了各种不同的比较指令.通过这些比较指令的执行 ...
- lua的多种实现方式(1-100的和)
function add( a, b ) return a + b end -- print( add( 10, 20 ) ) function loopT( T ) for i, v in ipai ...
- 事件处理程序（HTML）
HTML事件处理程序 通过设置HTML标签特性来绑定事件处理程序. 处理方式(如图): 1:会创建一个封装元素属性值的函数 2:会在这个函数中创建一个event事件对象 <form> &l ...