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知识,发现狂神在讲这一部分讲的不是特别清楚 ...
随机推荐
- 浅谈基于WOPI协议实现跨浏览器的Office在线编辑解决方案
如今,基于Web版的Office 在线预览与编辑功能已成为一种趋势,而关于该技术的实现却成为了国内大部份公司的技术挑战,挑战主要存在于两方面: 其一:目前国内乃至微软本身,还没有相对较为完善的解决方案 ...
- SpringBoot(5) SpringBoot个性化启动
1.在类路径下增加一个banner.txt,里面是启动要输出的信息 自定义banner在线生成工具: http://www.bootschool.net/ascii _ _ _ _ __ | | __ ...
- Jenkins结合.net平台工具之Msbuild
前面我们讲解了关于Jenkins的一些基本知识,通过这些知识我们可以结合一些其它工具实现更为复杂的任务,本篇我们将介绍如何使用msbuild工具结合Jenkins实现构建一个.net控制台框. 首先我 ...
- IntelliJ IDEA快捷键与使用小技巧
IntelliJ Idea 常用快捷键列表 修改方法如下: 点击 文件菜单(File) –> 点击 设置(Settings… Ctrl+Alt+S), –> 打开设置对话框. 在左侧的导航 ...
- 从零开始学安全(九)●OSI参考模型分层
主要分为7层和网络7层模型一样 物理层主要传输数据比特流 可以理解信号 数据链路层 逻辑层 像是交换机 网络层 又交换机发送到路由器 应用层 应用通信
- 【Java每日一题】20170223
20170222问题解析请点击今日问题下方的“[Java每日一题]20170223”查看(问题解析在公众号首发,公众号ID:weknow619) package Feb2017; public cla ...
- Integer Game（UVA11489）3的倍数
K - Integer Game Time Limit:1000MS Memory Limit:0KB 64bit IO Format:%lld & %llu Submit Status Pr ...
- 用Python实现Zabbix-API 监控
做运维的朋友应该知道,公司IDC机房经常有上架.下架.报修和报废的服务器.如果服务器数量很多的时候很容易造成监控遗漏. 大的互联网公司把监控系统和CMDB(资产管理系统|配置管理数据库系统 ...
- JavaScript 基础(一) - JavaScript的引入方式，JavaScript 变量命名规则，JS 的五种基本数据类型，ECMAScript 算数运算符，逻辑运算符
JavaScript的引入方式 直接编写 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- jstack 排查 java 进程占用大量 CPU 问题
1. top 看看哪个进程是罪魁祸首 2.将这个进程的jstack dump 到一个文件里面,以备使用. jstack -l 25886 > /tmp/jstack.log # 如果报错,则加 ...