外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

情况1：当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并

情况2：当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并

情况3：自身合并 假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并

情况4：带有外边距的空元素和另一个元素外边距相遇 还会发生合并

情况5：形成等距文本 由几个段落组成的典型文本页面各个段落间和手段与和框等间距

只有普通文档流中块框的垂直外边距才可以发生外边距合并。行内框、浮动框或绝对定位框间的外边距不会合并

CSS之边距合并的更多相关文章

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

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

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

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

  3. css中外边距合并

    最近在布局时遇到一个有趣的问题 <style> #div1{width:200px;height:200px;background:red;}  #div2{width:50px;heig ...

  4. CSS Margin外边距合并

    应该知道这点东西的!!! 可是偏偏记不住! 外边距合并会发生在以下两种情况下: 1 垂直出现的两个拥有外边距的块级元素. div1 { margin-bottom: 20px; } div2 { ma ...

  5. css的外边距合并或者外边距塌陷问题

    第一种情况: 已知两个宽和高均为100px,margin均为20px的div垂直排列,现象如下图所示: 当设置css1的margin-bottom:40px:或者css2的margin-top:40p ...

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

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

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

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

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

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

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

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

随机推荐

  1. Python:笔记(3)——面向对象编程

    Python:笔记(3)——面向对象编程 类和面向对象编程 1.类的创建 说明:和Java不同的是,我们不需要显示的说明类的字段属性,并且可以在后面动态的添加. 2.构造函数 构造函数的功能毋庸置疑, ...

  2. iOS UIImage UIImageView 展示图片 不变形 处理

    展示图片 时候 固定 了 imageView  的大小  图片 也裁剪了 尽量保持比例 可是 还是失真 变形了 这张图 ui 要求展示的UIimageView 大小 是固定 的  ,传过来的 图片 是 ...

  3. iOS UIImage 拉伸问题 (适用于UIButton等需要局部拉伸的情况)

    图片 有的切图切很大 还占用ipa大小,有时候 切图 只需要 局部或者说 一个压缩的图片的抽象状态 直接上代码 CGFloat top = ; // 顶端盖高度 ; // 底端盖高度 ; // 左端盖 ...

  4. RedisTemplate操作Redis

    RedisTemplate Redis 可以存储键与5种不同数据结构类型之间的映射,这5种数据结构类型分别为String(字符串).List(列表).Set(集合).Hash(散列)和 Zset(有序 ...

  5. Android硬件抽象层（HAL）概要介绍【转】

    本文转载自:http://blog.csdn.net/luoshengyang/article/details/6567257 Android的硬件抽象层,简单来说,就是对Linux内核驱动程序的封装 ...

  6. Linux Shell总结

    Shell编程总结: 1.linux命令 2.位置变量 $0 $1 $# $? 3.条件测试 [ ] [[ ]] (( )) if case 4.循环for while 5.打印echo cat 6. ...

  7. Ci下面隐藏index.php的方法

    1.需要apache打开rewrite_module,然后修改httpd.conf的AllowOverride none 为AllowOverride All(里面,不同的环境目录不同) 2.在CI的 ...

  8. 剑指offer之 斐波那契数列

    package Problem9; public class Fibonacci { /* * 题目描述: 写一个函数,输入n,求斐波那契数列的第n项,斐波那契数列的定义如下: n=0,f(n)=0 ...

  9. java入门了解13

    小知识点: 网络编程:主要解决计算机间数据传输 不需要html页面可以达到数据传输:QQ,微信 网页编程:继续Html页面基础上数据交互:OA,天猫... java方向:web方向,annrod常用S ...

  10. 算法（Algorithms）第4版 练习 1.5.3

    id数组和treesize数组变化情况: 0 1 2 3 4 5 6 7 8 9 1 1 1 1 1 1 1 1 1 1 10 components 9 0 1 2 3 4 5 6 7 8 9 1 1 ...