【21】外边距折叠(collapsing margins)


外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

【注意】margin外边距合并的条件。
margin折叠认知：
【1】外边距合并不仅仅出现在相邻的元素间，父子间同样会出现。空元素（没有边框和填充时）也会自身合并上下外边距。
【2】合并的margin必须是有直接接触的。（有border相隔就不行了）
【3】设置了属性overflow且值不为visible的块级元素，将不与它的子元素发生margin折叠；（也就是说overflow:hidden|auto|scroll不会与子元素折叠）
【4】margin折叠只发生在块级元素上；
【5】内联块级元素，浮动元素，根元素（如html与body间），绝对定位的(absolute,fixed)的margin不发生折叠；
【6】只有普通文档流中块框的垂直外边距才会发生外边距合并。







**

【21】外边距折叠(collapsing margins)的更多相关文章

  1. 内层div的margin-top影响外层div——引出外边距合并Collapsing margins

    内层div的margin-top影响外层div——引出外边距合并Collapsing margins 作者:zccst 今天才算是了解边距合并.正如一位前辈所言,每一个CSS的坑,都让你学到不少知识. ...

  2. CSS之外边距折叠

    外边距折叠 Collapsing margins,即外边距折叠,指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距. 其中所说的 margin 毗邻,可以归结为以下两点: 这两个或多个 ...

  3. Css 外边距折叠(collapsed margin ) 浅析

    Css 外边距折叠(collapses margin ) a.先来看看w3c 文档对于外边距折叠的定义: In CSS, the adjoining margins of two or more bo ...

  4. 外边距叠加collapsing-margin

    原载:Smallni | http://www.smallni.com/collapsing-margin/ 恩,margin叠加一直是个问题,也是我们一直会遇到的问题,很久以前就想把这个知识点整理下 ...

  5. 使用CSS兄弟选择器完成复杂垂直边距（vertical margins）的设计

    -------------------sibling选择器如何在完成复杂设计要求的同时,保持CSS可读 这是web前端开发过程中开始简单逐步变的复杂的例子之一:将一篇文章中的所有元素应用垂直边距(ve ...

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

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

  7. CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  8. Box Model,边距折叠，内联和块标签，CSSReset

    一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图 二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算 三.内联与 ...

  9. CSS3与页面布局学习笔记（二）——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

随机推荐

  1. MDX之Case When用法

    with member [Measures].[终端销售数量总计] as sum(ytd([日期].[年月].CurrentMember),[Measures].[终端销售数量]) member [M ...

  2. 代码中看见一共8个变量参数{SEO,0,0,0,0,0,0,0} 解读！{Top,0,0,0,0,0,0,Top}{Nav,0,0,0,0,0,0,Nav}

    代码中看见{SEO,0,0,0,0,0,0,0}{Top,0,0,0,0,0,0,Top}{Nav,0,0,0,0,0,0,Nav}解读! 举个例子: {GetNew,977,0,23,500,0,0 ...

  3. 用vue.js重构订单计算页面

    在很久很久以前做过一个很糟糕的订单结算页面,虽然里面各区域(收货地址)使用模块化加载,但是偶尔会遇到某个模块加载失败的问题导致订单提交的数据有误. 大致问题如下: 1. 每个模块都采用usercont ...

  4. Java类的静态块の二

    在上一篇Java类的静态块の一中介绍到:类的静态块在类加载时候执行,执行早于构造函数,并且只执行一次. 但是在下面的例子中却发现JVM并不是把把所有的static模块都执行完成再执行其他(Java果然 ...

  5. POJ 3162 Walking Race （树的直径，单调队列）

    题意:给定一棵带边权的n个节点的树,首先要求出每个点的最长路,然后写成序列d[1],d[2]...d[n],然后求满足 区间最大值-区间最小值<=k 的最大区间长度为多少? 思路: 分两步进行: ...

  6. 二级域名绑定ECS

    关于阿里云域名的绑定,下面是个人的理解,如有错误请指出. 首先,任何域名都需要在阿里云备案后才可以使用, 如果是二级域名,不能单独备案,需要其顶级域名在阿里云备案. http://help.aliyu ...

  7. Python进程间通信和网络基础

    Python进程间通信和网络基础 Python支持多种进程间通讯的方式, 有单机通信的signal和mmap等, 也有可以通过网络的socket方式, 这里先介绍select等的有关知识, socke ...

  8. file-leak-detector（文件句柄泄漏）在JDK1.6环境下 weblogic 和 tomcat安装方式以及使用方式

    file-leak-detector作者博客详见: http://file-leak-detector.kohsuke.org/ file-leak-detector学习贴: https://blog ...

  9. Could not resolve matching constructor (hint: specify index/type/name arguments for simple parameter 标签： 构造器注入Spring

    问题:要么是因为构造方法改变了,要么就是构造方法入参实例化失败(比如没有实现) 问题 在练习spring构造器注入方式的小程序的时候报错: Exception in thread “main” org ...

  10. myeclipse 导入项目时no projects are found to import解决办法

    myeclipse 识别一个工程需要.classpath与.project文件,一般无需提交SVN所以项目切下来的时候是没有这两个文件的. 方法1: 1) 在myeclipse中新建一个和你要导入的项 ...