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

           

解决办法:

  1. 给父级盒子设置overflow:hidden
  2. 给父级盒子设置border
  3. 给父级盒子设置padding

margin的两个有趣现象:margin合并和margin塌陷的更多相关文章

  1. margin塌陷与margin合并(margin),清除浮动

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

  2. margin和padding那点事及常见浏览器margin padding相关Bug

    用Margin还是用Padding 何时应当使用margin: 需要在border外侧添加空白时. 空白处不需要背景(色)时. 上下相连的两个盒子之间的空白,需要相互抵消时.如15px + 20px的 ...

  3. python---手动实现两个有序列表的合并

    可能又和标准的实现不一样, 但是自己的实现, 印象就会不一样的. # coding = utf-8 # 两个有序列表的合并,将two_list合并到one_list def merge_order_l ...

  4. java实现两个不同list对象合并后并排序

    工作上遇到一个要求两个不同list对象合并后并排序1.问题描述从数据库中查询两张表的当天数据,并对这两张表的数据,进行合并,然后根据时间排序.2.思路从数据库中查询到的数据放到各自list中,先遍历两 ...

  5. Python有趣现象(不定时更新)

    1.list中extend方法有趣现象 1.1 List+=Str 与 List.extend(Str) list1 = [11,2,45] str1 = 'Michael' list1.extend ...

  6. MySQL 两个数据库表中合并数据

    两个数据库表中合并数据 如果有  t1  和 t2 两个数据库表格,它们两个对应的字段是相同的.如何将 t2 的数据插入到t1中去呢? insert into t1 select * from t2 ...

  7. margin 依附与可见的内容,不能为margin而写margin

    margin  依附于可见的内容,不能为margin而写margin <!DOCTYPE html><html><head><style> p{marg ...

  8. JAVA实现选择排序,插入排序,冒泡排序,以及两个有序数组的合并

    一直到大四才开始写自己的第一篇博客,说来实在有点羞愧.今天写了关于排序的算法题,有插入排序,冒泡排序,选择排序,以下贴上用JAVA实现的代码: public class test5 { public ...

  9. css中两种居中方式text-align:center和margin:0 auto 的使用场景

    关于使用text-align:center和margin:0 auto 两种居中方式的比较 前言:最近由于要学习后端,需要提前学习一部分前端知识,补了补css知识,发现狂神在讲这一部分讲的不是特别清楚 ...

随机推荐

  1. 【原创】Windows服务管家婆之Service Control Manager

    Service Control Manager,服务控制管理器,人称SCM就是它!在Windows内核中,都可以看到她忙碌的身影,可以说是系统服务和驱动的管家婆了!     SCM管家婆起早贪黑,每次 ...

  2. MySQL 高性能优化实战总结

    1 前言 2 优化的哲学 3 优化思路 3.1 优化什么 3.2 优化的范围有哪些 3.3 优化维度 4 优化工具有啥? 4.1 数据库层面 4.2 数据库层面问题解决思路 4.3 系统层面 4.4 ...

  3. Webpack编译结果浅析

    如今Webpack已经是一个不可或缺的前端构建工具,借助这个构建工具,我们可以使用比较新的技术(浏览器不能直接支持)来开发. 你是否好奇你写的代码经过Webpack构建之后会生成什么东西?是否有时调试 ...

  4. netty源码解解析(4.0)-14 Channel NIO实现:读取数据

     本章分析Nio Channel的数据读取功能的实现. Channel读取数据需要Channel和ChannelHandler配合使用,netty设计数据读取功能包括三个要素:Channel, Eve ...

  5. MySQL 索引与查询优化

    本文介绍一些优化 MySQL 索引设计和查询的建议.在进行优化工作前,请务必了解MySQL EXPLAIN命令: 查看执行计划 索引 索引在逻辑上是指从索引列(关键字)到数据的映射,通过索引可以快速的 ...

  6. 五种IO模型透彻分析

    1.基础 在引入IO模型前,先对io等待时某一段数据的"经历"做一番解释.如图: 当某个程序或已存在的进程/线程(后文将不加区分的只认为是进程)需要某段数据时,它只能在用户空间中属 ...

  7. [转]git图解(3):分支操作

    本文转自:https://www.jianshu.com/p/342a9f8db004   title_img.png git 的分支是它最明显的特性, 大部分人听别人推荐使用git都会听到“git分 ...

  8. C#面向对象之多态。

    1.定义:指不同的对象收到相同的消息时,会产生不同的行为,同一个类在不同的场合下表现出不同的行为特征. 比如. class Program { //下面三各类都继承object,但不同类的tostri ...

  9. 44.Linux君正X1000-添加st7789v显示

    由于板子LCD旧屏是ili9335型号的,旧屏有时候会断货,如果断货则使用一个st7789v型号的LCD 它们两个屏的区别在于初始化屏的参数不同,引脚都一样,也就是说需要使板子同时支持ili9335型 ...

  10. springMVC_02hello案例

    1.导入jar包 commons-logging-1.1.1.jar jackson-annotations-2.5.4.jar jackson-core-2.5.4.jar jackson-data ...