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. CentOS docker 常用命令

    yum install docker 安装服务 systemctl start docker.service 启动服务 systemctl enable docker.service 开机启动服务 d ...

  2. SHELL脚本--变量(基础)

    bash&shell系列文章:http://www.cnblogs.com/f-ck-need-u/p/7048359.html 变量存在于内存中.假设变量str,设置或修改变量属性时,不带$ ...

  3. Go Web：处理请求

    处理请求 Request和Response http Requset和Response的内容包括以下几项: Request or response line Zero or more headers ...

  4. [转]Node.js框架对比：Express/Koa/Hapi

    本文转自:https://www.cnblogs.com/souvenir/p/6039990.html 本文翻译自: https://www.airpair.com/node.js/posts/no ...

  5. 第一册：lesson fifteen。

    原文:Your passports,please. A:Are you Swedish? B:No,we are not. We are Danish. A:Are your friends Dani ...

  6. 详解MySQL基准测试和sysbench工具(转)

    前言 作为一名后台开发,对数据库进行基准测试,以掌握数据库的性能情况是非常必要的.本文介绍了MySQL基准测试的基本概念,以及使用sysbench对MySQL进行基准测试的详细方法. 文章有疏漏之处, ...

  7. Android Studio 学习（五）网络

    HttpURLConnection OkHttp 添加依赖 编辑 app/build.gradle 在dependencies闭包中添加 implementation 'com.squareup.ok ...

  8. Java8 Optional类

    概述 到目前为止,著名的NullPointerException是导致Java应用程序失败的最常见原因.过去,为了解决空指针异常,Google公司著名的Guava项目引入了Optional类,Guav ...

  9. JQuery禁止/恢复按钮readonly和disabled小结

    禁止/恢复按钮 其实就是更改 <input> 的属性. 禁用 id 为 btn 的按钮:  代码如下 复制代码 $("#btn").attr({"disabl ...

  10. mapper代理开发步骤

    1:先写Mapper接口,UserMapper.java 2:然后遵循4条开发规范,写映射文件,UserMapper.xml 3:将映射文件,UserMapper.xml加入到SqlMapConfig ...