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知识,发现狂神在讲这一部分讲的不是特别清楚 ...
随机推荐
- 数据读取（SQL）与文本写入（fileStream）
要求:从三个不同服务器中取数,对最近10的历史数据进行去重,写出到文本. 1.读取. public static DataTable ExecuteSql(string connectString, ...
- Go基础系列：常量和变量
常量(Constants)和iota 常量包含不会发生更改的数据.常量的数据类型只能是boolean.number(int/float/complex)或string. 定义方式: const NAM ...
- 翻译：如何向MariaDB中快速插入数据(已提交到MariaDB官方手册)
本文为mariadb官方手册:How to Quickly Insert Data Into MariaDB的译文. 原文:https://mariadb.com/kb/en/how-to-quick ...
- sqoop安装及使用
简介: sqoop是一款用于hadoop和关系型数据库之间数据导入导出的工具.你可以通过sqoop把数据从数据库(比如mysql,oracle)导入到hdfs中:也可以把数据从hdfs中导出到关系型数 ...
- [转]Docker(三)：Dockerfile 命令详解
本文转自:https://blog.csdn.net/ityouknow/article/details/79600406 上一篇文章Docker(二):Dockerfile 使用介绍介绍了 Dock ...
- 【转载】 C#中全角转半角以及半角转全角
半角指的是一个字符占用一个标准字符的位置.全角指一个字符占用两个标准字符位置的状态.在C#中,我们可以通过程序的方法,将相应的半角字符串信息转换为全角类型,也可以实现全角转半角功能. 相应封装好的方法 ...
- 建立多页面vue.js项目
介绍 根据需求,我们希望建立一个多页面的vue.js项目,如何改造单页面vue.js项目为多页面项目?跟着我的步伐看下去吧. 1.创建单页面vue.js项目 简单的记录一下创建步骤: --安装cnpm ...
- webAPI 控制器（Controller）太多怎么办？
写过接口的同学都知道,接口会越来越多,那么控制器也会越来越多.这时候就需要根据某种业务或特性对controller进行分类然后建立文件夹. 我想到一个折中的方案:伪Areas! 在Areas文件夹下建 ...
- Python网络编程Socket之协程
一.服务端 __author__ = "Jent Zhang" import socket import gevent from gevent import monkey monk ...
- T-SQL基础（五）之增删改
在前面的文章中对T-SQL的查询做了基本总结,接下来我们看下SQL中的另外一个常用操作——数据的修改. INSERT INSERT 向数据表中插入数据的基本语句,句式: INSERT INTO tab ...