之前看到的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. Kibana创建索引成功，但一直不显示出来（Fielddata is disabled on text fields by default. Set fielddata=true........）

    现象 把EFK整个集群搭建完成后,通过Kibana操作界面创建索引(如图1),我创建了lile-zabbix*的索引,显示是创建成功了,但是只要我在重新刷新一次,已经创建的索引就“消失了”.后通过查看 ...

  2. iOS 抽奖轮盘效果实现思路

    临近活动,相信不少app都会加一个新的需求——抽奖不多废话,先上GIF效果图 作为一个开发者,有一个学习的氛围跟一个交流圈子特别重要这是一个我的iOS交流群:937194184,不管你是小白还是大牛欢 ...

  3. 【集训Day3 单调队列】【2018寒假集训Day 5更新】最大子序列和

    最大子序列和(maxsum) [问题描述] 输入一个长度为n的整数序列(A1,A2,……,An),从中找出一段连续的长度不超过M的子序列,使得这个序列的和最大. 例如: 序列 1, -3, 5, 1, ...

  4. React躬行记（15）——React Hooks

    Hook(钩子)是React v16.8新引入的特性,能以钩子的形式为函数组件附加类组件的状态.生命周期等特性.React的类组件有难以拆分.测试,状态逻辑分散,难以复用等问题,虽然可以通过渲染属性( ...

  5. 使用spring boot配置Gmail邮箱发送邮件

    最近项目有用到配置Gmail来发送通知邮件给客户,由于国内众所周知的原因,联调测试中遇到了一些问题,不过好在都一一解决了,现在做个记录,也给其他同仁做个参考. 相关配置: spring.mail.ho ...

  6. python迭代器生成器-迭代器和list区别

    迭代 生成 for循环遍历的原理 for循环遍历的原理就是迭代,in后面必须是可迭代对象 为什么要有迭代器 对于序列类型:字符串.列表.元组,我们可以使用索引的方式迭代取出其包含的元素.但对于字典.集 ...

  7. TypeScript躬行记（1）——数据类型

    TypeScript不仅支持JavaScript所包含的数据类型,还额外扩展了许多实用的数据类型,例如枚举.空值.任意值等. 一.JavaScript的数据类型 JavaScript的数据类型包括6种 ...

  8. 纯CSS背景噪声.html

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. 3分钟了解ServiceStage 应用智能化运维【华为云分享】

    [摘要] 微服务云应用平台(ServiceStage)是面向企业及开发者的一站式DevOps平台服务,支持基于微服务的应用开发.治理.部署及运维监控的全生命周期管理,并提供大规模容器集群管理及中间件服 ...

  10. C 基础数据类型 性能测试

    简单测试了C语言中分别使用16位整数和32位整数实现的定点数和内建浮点数的乘除性能: 在release 下 循环 1 0000 0000 * 20次 的时间: CPU:7700K/4.2Ghz 定点数 ...