之前看到的post中有这样的一个问题：垂直margin为什么会重叠？我可以说出solve，但是说不出why。

  • 　在stackoverflow上找到了一个很好的解释：margin的定义不是让元素移动xxpx，而是这个元素的旁边必须有xxxpx的的空白。
  • 　得到了这个解释之后，想一下“为首个子元素添加20px的上边距，父元素竟跟着子元素下沉了”这个问题，再思考一下解决方法。给父元素添加overflow开启一个BFC，或者给父元素增加padding、border之类，这样的做法使元素的旁边边界不是上一个盒子而是父元素，必须要存在的空白的相对位置变了，这个时候，子元素不会再去“影响”父元素的位置。

  • 一般就是给父元素设置overflow: hidden;即可解决问题，之所以出现这种情况的原因是：普通文档流盒子间，只要垂直外边距直接接触就会发生合并，合并后外边距视觉高度取两个发生合并外边距中较大者。发生这一现象的有三种情况：相邻兄弟块元素间、父元素及其首子元素和末子元素间（没有内边距或边框把外边距分隔开）、空块级元素自身的合并。

实例一：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        .parent {

            width: 200px;

            height: 200px;

            background: green;

       }

        .parents {

            width: 200px;

            height: 200px;

            background: red;

            /*overflow: hidden;*/

        }

        .child {

            /*margin-top: 20px;*/

            width: 100px;

            height: 100px;

            background: blue;

        }

    </style>

</head>

<body>

    <div class="parent"></div>

    <div class="parents">

        <div class="child">

        </div>

    </div>

</body>

</html>

页面效果：（还未设置蓝色块的margin-top：20px）

实例二：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        .parent {

            width: 200px;

            height: 200px;

            background: green;

        }

        .parents {

            width: 200px;

            height: 200px;

            background: red;

            /*overflow: hidden;*/

        }

        .child {

            margin-top: 20px;

            width: 100px;

            height: 100px;

            background: blue;

        }

    </style>

</head>

<body>

    <div class="parent"></div>

    <div class="parents">

        <div class="child">

        </div>

    </div>

</body>

</html>

此时加入了蓝色块的margin-top：20px，但是蓝色块的父级元素红色块未加overflow：hidden，因此父级元素红色块与子元素蓝色块一同向下移动了20px；

实例三：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        .parent {

            width: 200px;

            height: 200px;

            background: green;

        }

        .parents {

            width: 200px;

            height: 200px;

            background: red;

            overflow: hidden;

        }

        .child {

            margin-top: 20px;

            width: 100px;

            height: 100px;

            background: blue;

        }

    </style>

</head>

<body>

    <div class="parent"></div>

    <div class="parents">

        <div class="child">

        </div>

    </div>

</body>

</html>

此时父级元素红色块加入了overflow：hidden，激活了BFC属性，导致子元素蓝色块的旁边边界不是上一个盒子而变成了父元素红色块，这个时候父元素红色块就不会跟着一起移动了。

垂直margin为什么会重叠的更多相关文章

  1. CSS外边距margin上下元素重叠

    CSS外边距margin上下元素重叠 转载:http://www.gaoyouyou.com/view/77.htm 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大的值.如 ...

  2. margin百分比，重叠和auto

    一. margin百分比 1. 普通元素的百分比margin都是相对于容器的宽度计算 2. 绝对定位元素的百分比margin是相对于第一个定位祖先元素(relative/absolute/fixed) ...

  3. 文本溢出后，隐藏显示"..."和margin边距重叠

    一.隐藏加省略 单行文本: overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 多行文本: overflow: hidden ...

  4. CSS 外边距(margin)重叠及防止方法

    边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大 ...

  5. CSS里盒子模型中【margin垂直方向边界叠加】问题及解决方案

    边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合. 如果都是正边界,结果的边界宽度是 ...

  6. 外边距（padding）重叠的及解决办法

    两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大的值.如果出现负边界,则在最大的正边界中减去绝对值最大的负边界.如果没有正边界,则从零中减去绝对值最大的负边界.注意:相邻的盒 ...

  7. 外边距塌陷之clearance

    在一个BFC中,垂直方向上相邻的块级盒子产生外边距塌陷,本文要说一个特殊的外边距塌陷情况,即当垂直方向上,两个块级盒子之间有个浮动元素相隔时,这个时候会产生什么样的效果呢? .outer{ overf ...

  8. margin属性以及垂直外边距重叠问题

       盒子的margin属性         盒子的外边距margin 指的是当前盒子与其他盒子之间的距离,环绕在盒子周围的空白区域,属于不可见的区域,,不会影响到可见框的大小,而是会影响到盒子的位置 ...

  9. 上下margin重叠传递问题

    我发现强迫症真的是我一个大病...每次都非得把所有情况都实验出来不可...BUT!!!!!!!!!悲催的是,这么多情况我根本记不住...还是要在写代码的时候不断出错再排错~受不了自己了!不过还是把这部 ...

随机推荐

  1. 基于.NetStandard的简易EventBus实现-基础实现

    一.问题背景 最近离职来到了一家新的公司,原先是在乙方工作,这回到了甲方,在这一个月中,发现目前的业务很大一部分是靠轮询实现的,例如:通过轮询判断数据处于B状态了,则轮询到数据后执行某种动作,这个其实 ...

  2. C语言|博客作业02

    这个作业属于哪个课程 C程序语言设计 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-1/homework/8654 我在这个课程的目标是 ...

  3. [学习笔记] 在Eclipse中使用Hibernate,并创建第一个工程

    在Eclipse中使用Hibernate 安装 Hibernate Tools 插件 https://tools.jboss.org/downloads/ Add the following URL ...

  4. JavaScript中的基本数据类型和引用数据类型

    ECMAScript变量包括了两种不同的数据类型 在学习JavaScript的数据类型时,我们通常会把数据类型分成六中(官方认为)Object.String.Boolean.Number.Undefi ...

  5. 达梦关键字(如:XML,EXCHANGE,DOMAIN,link等)配置忽略

    背景:在使用达梦数据库时,查询SQL中涉及XML,EXCHANGE,DOMAIN,link字段,在达梦中是关键字,SQL报关键词不能使用的错误. 解决办法: 配置达梦安装文件E:\MyJava\dmd ...

  6. （三十六）golang--文件的基本操作

    文件程序中是以流的形式操作的. 流:数据在数据源(文件)和程序(内存)之间经历的路径: 输入流:数据从数据源到程序的路径: 输出流:数据从程序到数据源的路径: 常用的文件操作和函数: 1.常用的文件操 ...

  7. Asis CTF 2016 b00ks理解

    ---恢复内容开始--- 最近在学习堆的off by one,其中遇到这道题,萌新的我弄了大半天才搞懂,网上的很多wp都不是特别详细,都得自己好好调试. 首先,这题目是一个常见的图书馆管理系统,虽然我 ...

  8. 【翻译】全球用尽IPv4的一点思考

    作者:Dimple 公众号:奔跑吧攻城狮 简介:专属于Java和Android开发,和你聊聊职场话题,一同展望未来 作为小小号主的我表示很无力啊,这几天,天天都是热点.前有网易员工勇敢发声维护自己的利 ...

  9. 基于Pytorch的简单小案例

    神经网络的理论知识不是本文讨论的重点,假设读者们都是已经了解RNN的基本概念,并希望能用一些框架做一些简单的实现.这里推荐神经网络必读书目:邱锡鹏<神经网络与深度学习>.本文基于Pytor ...

  10. 从Excel到Python：最常用的36个Pandas函数

    本文涉及pandas最常用的36个函数,通过这些函数介绍如何完成数据生成和导入.数据清洗.预处理,以及最常见的数据分类,数据筛选,分类汇总,透视等最常见的操作. 生成数据表 常见的生成数据表的方法有两 ...