之前看到的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. nyoj 68-三点顺序（叉积）

    68-三点顺序 内存限制:64MB 时间限制:1000ms 特判: No 通过数:3 提交数:5 难度:3 题目描述: 现在给你不共线的三个点A,B,C的坐标,它们一定能组成一个三角形,现在让你判断A ...

  2. CSS(8)---通俗讲解定位(position)

    CSS(8)---通俗讲解定位(position) CSS有三种基本的定位机制: 普通流.浮动.定位.前面两个之前已经讲过,详见博客: 1.CSS(5)---通俗讲解盒子模型 2.CSS(6)---通 ...

  3. NetCore3.0 文件上传与大文件上传的限制

    NetCore文件上传两种方式 NetCore官方给出的两种文件上传方式分别为“缓冲”.“流式”.我简单的说说两种的区别, 1.缓冲:通过模型绑定先把整个文件保存到内存,然后我们通过IFormFile ...

  4. 力扣（LeetCode）找不同 个人题解

    给定两个字符串 s 和 t,它们只包含小写字母. 字符串 t 由字符串 s 随机重排,然后在随机位置添加一个字母. 请找出在 t 中被添加的字母. 示例: 输入: s = "abcd&quo ...

  5. ZeroC ICE的远程调用框架 Callback（一）-AMI异步方法调用框架

    Ice框架提供了不少回调设施,其中一些是使用Ice远程调用进行ami模式或amd模式的支撑.本篇来看一下用于代理端的回调设施. Ice代码中有好几个Callback相关命名的基类,并且slice还会为 ...

  6. F#周报2019年第47期

    新闻 相遇WebWindow,.NET Core上的跨平台webview类库 使用Bolero在WebAssembly中运行F# 用于你团队代码库的AI辅助IntelliSense Jupyter N ...

  7. eNSP仿真软件之利用单臂路由实现VLAN间路由

    1. 实验原理 以太网中,通常会使用VLAN技术隔离二层广播域来减少广播的影响,并增强网络的安全性和可管理性.其缺点是同时也严格地隔离了不同VLAN之间的任何二层流量,使分属于不同VLAN的用户不能直 ...

  8. 使用Query Store监控性能

    Query Store是SQL Server 2016中引入的语句性能监控和调优工具,它不仅自动捕获查询.执行计划和运行时统计信息的历史记录,而且还可以识别出由于执行计划更改而导致的性能差异,简化了性 ...

  9. React组件略讲

    React是前端组件化开发的开山鼻祖,这种开发方式彻底解决了的前端组件复用的痛点.今天,就来研究一下React组件开发. 前端同学一般都会从Vue入门,因为Vue使用的<template> ...

  10. selenium(java)浏览器多窗口切换处理

    要在多个窗口直接切换,首先获取每个窗口的唯一标示符(句柄),通过窗口属性可以获取所有打开窗口的标示符,以集合的形式返回:以下示例:       Set<String> winHandels ...