第一种情况：

已知两个宽和高均为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. linux 的sed命令解释 sed ':t;N;s/\n/,/;b t' 将换行符换成逗号

    linux 的sed命令解释 sed ':t;N;s/\n/,/;b t' 将换行符换成逗号 实现的功能是吧换行符换成逗号了,自己试验过. 求解释,:t N b t 都是什么意思??? :t 定义la ...

  2. uva 12108 Extraordinarily Tired Students (UVA - 12108)

    算法完全转载...原博客(https://blog.csdn.net/u014800748/article/details/38407087) 题目简单叙述 题目就是一堆学生他们有清醒的时候和昏迷的时 ...

  3. isset在php5.6-和php7.0+的一些差异

    今天在公司实现一个模块功能时写了如下代码: class ProductCategory { const TYPES = [ 1 => 'type1', 2 => 'type2', ]; p ...

  4. C/C++ uchar的一个有趣用法

    本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/51377490 图像处理中常常使用的一种 ...

  5. CODEVS2144 砝码称重2 (哈希表)

    由于m很大,所以不能使用DP. 注意到n≤30,直接暴力2^n会TLE. 所以,将砝码平均分成两份,对一份进行一次暴力,用哈希表存下可能的结果. 对下一份再进行一次暴力,在哈希表中搜索剩余的砝码重量是 ...

  6. iOS：让标题栏背景图片适应iOS7

    From google: If your app uses a custom image as the background of the bar, you'll need to provide a ...

  7. css3中 弹性盒模型布局之box-flex

    box-flex:也就是让子容器针对父容器的宽高属性依照一定的规则来划分 Eg: html代码: <div class="wrap"> <div class=&q ...

  8. iOS开发一行代码系列:一行搞定数据库

    原理 iOS 和 SQL的相应关系 Model类结构      =>    SQL表结构 Model实例       =>  SQL表中的一行 Model实例的属性   =>   S ...

  9. DirectX11 学习笔记8 - 最简单的光照

    在上一个列子的基础上加了一个地面.这个地面是光照效果生成的. 看图: 先说明: 光照 须要重写一个 lightshader  就是光照的渲染器 // Define the input layout D ...

  10. poj 3461 字符串单串匹配--KMP或者字符串HASH

    http://poj.org/problem?id=3461 先来一发KMP算法: #include <cstdio> #include <cstring> #include ...