第一种情况：

已知两个宽和高均为100px，margin均为20px的div垂直排列，现象如下图所示：

当设置css1的margin-bottom：40px；或者css2的margin-top：40px时，现象如下图所示：

结论：

只有当两个垂直排列的盒子的垂直外边距挨在一起时会产生合并问题，此问题也不需要解决，记住谁的外边距较大就采用谁的外边距就ok了。

水平排列的盒子不存在合并的问题。

下面实验证实：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

       div{

           /*抽取两个盒子共同特点的代码*/

            width:100px;

            height: 100px;

            margin: 20px;

            float: left;   /*左浮动实现盒子水平排列*/

        }

        /*分别设置两个盒子不同的颜色*/

        .div1{

            background: pink;

        }

        .div2{

            background:#CCC;

        }

    </style>

</head>

<body>

    <div class="div1">css1</div>

    <div class="div2">css2</div>

</body>

</html>

现象为：

第二种情况：

一个宽高均为200px的div1内嵌一个宽高均为100px的div2，当给div2设置margin：30px时，现象为：

此时外面的这个大的div的margin也变成了30px，下面这段解决此问题：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .div1{

            width: 200px;

            height: 200px;

            background: pink;

            overflow: hidden;     /*解决该问题的代码*/
　　　　　　　/*border:1px solid black  第二种解决办法：给大div设置一个边框*/

        }

        .div2{

            width:100px;

            height:100px;

            margin: 30px;

            background:#CCC;

        }

    </style>

</head>

<body>

    <div class="div1">

        <div class="div2">css</div>

    </div>

</body>

</html>

需要在大的div中写入overflow: hidden;这句代码可以理解为让浏览器显示该div的时候检查一下是否有问题，如果有问题，浏览器来解决。第二种解决办法见上面的代码。

最后的现象为：

css的外边距合并或者外边距塌陷问题的更多相关文章

  1. CSS外边距合并&块格式上下文

    前言问题Margin Collapsing 外边距合并Block Formatting Context 块格式化上下文解决方案参考 前言 之前在前端开发的过程中,都没有遇到外边距合并的问题(其实是因为 ...

  2. margin显示怪异，外边距合并问题

    很多时候我们使用两个div,内层的div设置文字,需要垂直居中与上层div,但是怎么设置样式都不行,vertical-align:middle也不行. 代码: <div style=" ...

  3. 关于CSS inline-block、BFC以及外边距合并的几个小问题

    CSS inline-block和BCF对于初学者来说,总是弄不太明白,下面记录下我在学习这块知识的过程中遇到的几个问题,供大家参考,有不足的地方,欢迎大家批评指正. 一.在什么场景下会出现外边距合并 ...

  4. css外边距合并和z-index的问题

    参考这篇文章, 将外边距的 折叠 参考这篇文章, 将bfc的生成, bfc的应用 参考这篇文章 position: absolute的元素, 仍然具有内填充padding和border边框属性样式, ...

  5. CSS框模型（框模型概述、内边距、边框、外边距、外边距合并）

    CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景. ...

  6. 关于CSS的外边距合并问题

    首先,需要明确的是只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 而在普通文档流中,这又分两种情况,分别是父子元素之间和相邻元素之间. <!D ...

  7. CSS 外边距合并。

    <div id = "parent"> <div id = "child"> demo </div> </div> ...

  8. CSS 垂直外边距合并：规范、延伸、原理、解决办法

    <CSS 权威指南>第七章基本视觉格式化.p192,提到了 垂直外边距合并 的情况,解释总体算清晰,但是感觉不全且没有归纳成一条一条的,参考 CSS框模型中外边距(margin)折叠图文详 ...

  9. CSS外边距合并的几种情况

    CSS外边距合并的几种情况 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距在CSS1中就有 The width ...

随机推荐

  1. JAVA学习总结-基础语法

    /** * 这篇文章供自己学习JAVA总结回顾使用 * 主要借鉴了马士兵老师的视频进行总结 * @author Kingram */ 标识符的概念和命名规则 JAVA常量---不可变的变量 程序的执行 ...

  2. Python网络爬虫之Scrapy框架（CrawlSpider）

    目录 Python网络爬虫之Scrapy框架(CrawlSpider) CrawlSpider使用 爬取糗事百科糗图板块的所有页码数据 Python网络爬虫之Scrapy框架(CrawlSpider) ...

  3. 1、深度学习模型的基本结构——RNN

    本系列为深度学习课程笔记,课程网址在http://speech.ee.ntu.edu.tw/~tlkagk/courses_MLDS17.html 深度学习的基本步骤:定义模型-->定义损失函数 ...

  4. JavaSE 学习笔记之异 常（十）

    异 常: 异常:就是不正常.程序在运行时出现的不正常情况.其实就是程序中出现的问题.这个问题按照面向对象思想进行描述,并封装成了对象.因为问题的产生有产生的原因.有问题的名称.有问题的描述等多个属性信 ...

  5. 清北学堂模拟赛d6t2 刀塔

    分析:看到最小值最大就很显然是二分了吧,二分一下最小值,把小于它的数给删掉,然后看每个数向左边能延伸多长,往右边能延伸多长,最后统计一下有没有可行答案就可以了. #include <cstdio ...

  6. python在Linux中安装虚拟环境，区别python2和python3，分别安装模块

    安装虚拟环境的时候遇到的问题,解决的过程很闹心,在这里简单直接的分享出来,就是为了解决问题.  安装虚拟环境(须在联网状态下) $ sudo pip install virtualenv $ sudo ...

  7. nyoj_283_对称排序_201312051155

    对称排序 时间限制:1000 ms  |           内存限制:65535 KB 难度:1   描述 In your job at Albatross Circus Management (y ...

  8. nyoj_216_A problem is easy_201312051117

    A  problem is easy 时间限制:1000 ms  |           内存限制:65535 KB 难度:3   描述 When Teddy was a child , he was ...

  9. C#--正则匹配

    一个好用的Regex测试插件 快捷键:ctrl+ r , ctrl+ x 打开正则表达式工具 C#的正则表达式的常用的规则: [abc] 里面的每一次字符都可以进行匹配 a{2} 匹配2个a a{2, ...

  10. firedac数据集控件的公共祖先类——TFDAdaptedDataSet

    firedac数据集控件的公共祖先类——TFDAdaptedDataSet TFDQuery = class(TFDCustomQuery)TFDCustomQuery = class(TFDRdbm ...