之前看到的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. windows下大数据开发环境搭建（1）——Hadoop环境搭建

    所需环境 jdk 8 Hadoop下载 http://hadoop.apache.org/releases.html 配置环境变量 HADOOP_HOME: C:\hadoop-2.7.7 Path: ...

  2. HashSet源码学习，基于HashMap实现

    HashSet源码学习 一).Set集合的主要使用类 1). HashSet 基于对HashMap的封装 2). LinkedHashSet 基于对LinkedHashSet的封装 3). TreeS ...

  3. 【Linux系列】Centos 7安装 PHP（四）

    目的 为了下面的Laravel部署,本篇开始安装PHP. 设置PHP源 查看Centos源是否有PHP. yum list php* 进一步查看PHP的版本. yum info php.x86_64 ...

  4. MySQL常用的查询语句回顾

    让你快速复习语句的笔记宝典. create table users(    username varchar(20) primary key,    userpwd varchar(20) ) alt ...

  5. 小程序取消IOS虚拟支付解决方案

    前因 本来我们的小程序用的好好的,结果突然有一天,微信就把小程序的ios端的虚拟支付给关了...坑爹啊!搞的安卓端的可以支付,ios的支付不了.于是就在网上找解决办法. 一说通过app跳转支付,总不能 ...

  6. JAVA数组翻转

    首先可 public class RevcArr { public static void main(String[] args) { // TODO Auto-generated method st ...

  7. 【Luogu P2146】软件包管理器

    Luogu P2146 由于对于每一个软件包有且只有一个依赖的软件包,且依赖关系不存在环. 很显然这是一个树形的结构. 再看题目要求的操作,安装实际上对应的是覆盖根节点到当前节点的路径,卸载则是覆盖该 ...

  8. day 33 线程锁

    Python的GIL锁 - Python内置的一个全局解释器锁,锁的作用就是保证同一时刻一个进程中只有一个线程可以被cpu调度. 为什么有这把GIL锁? 答:Python语言的创始人在开发这门语言时, ...

  9. Python模块——loguru日志模块简单学习

    Python loguru模块简单学习 首先安装模块:pip install logoru,然后引入模块: from loguru import logger 1.直接输出到console logge ...

  10. Ztree树增删改查菜单，遇到的问题总结

    一.引言 我今天做了一个Ztree树增删改查菜单的功能.其中遇到了很多坑爹的问题,和大家讲述一下. 二.代码展示 1.Ztree树前台代码 <%@ page language="jav ...