【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. RTT

    Segger RTT的使用 一般arm系统中,如何通过电脑键盘和显示器同mcu进行交互最有效的有两种形式:arm7的semihost,cm时代的traceswo.现在jlink推出了颇具特色的rtt( ...

  2. python学习之邮件

    分类smtp邮件 html邮件,带附件的邮件. 一 STTP邮件:设置SMTP代理机构,发送人的邮箱和密码,收件人的邮箱地址(email模块):接收端,发送(smtplib模块).SMTP(smtp_ ...

  3. vue-cli脚手架(框架)

    一.创建vue项目 npm install vue-cli -g #-g全局 (sudo)npm install vue-cli -g #mac笔记本 vue-init webpack myvue # ...

  4. Sublime的用法

    一.首先安装插件 1.安装Package Control,这是为了安装其他插件做基础,它可以方便我们下载其他插件 (1).按Ctrl+`调出console(注:避免热键冲突) (2).粘贴以下代码到命 ...

  5. Android 麦克风录音带音量大小动态显示的圆形自定义View

    1.所谓无图无真相,先上效果图.我们要实现的就是中间那个录音的按钮,周边会显示一圈音量大小的波形 2.VolumCircleBar继承自View,我们进行了自定义,代码如下 package com.r ...

  6. Power BI 连接到 Azure 账单，自动生成报表，可刷新

    开始研究Azure官网等,提供的链接都是错误的,躺了很大的一个坑,配置后根本无法获取账单信息,经过多次查询找到了方向,过来记录一下: 错误的地址(应该是适用于全球版,国内版无法这样获取): https ...

  7. Memcache笔记01-Memcache的安装

    memcached是什么? Memcached是一个高性能的分布式的内存对象缓存系统,目前全世界不少人使用这个缓存项目来构建自己大负载的网站,来分担数据库的压力,通过在内存里维护一个统一的巨大的has ...

  8. C++拾遗（三）——函数

    函数的定义 C++是一种静态强类型语言,对于每一次的函数调用,编译时都会检查其实参,必须与形参类型相同,或可被转换为该类型. 参数传递 普通的非引用类型的参数通过复制对应的实参实现初始化.引用形参直接 ...

  9. 精仿百思不得姐客户端应用iOS源码

    XFBaiSiBuDeJie 高仿百思不得姐客户端 初次学习使用RAC,还不是怎么熟悉,使用的仍是MVC模式,MVVM还在摸索中... 如果大家觉得还不错,请给颗星星支持下~~~ 程序中使用到的库 A ...

  10. Stream.iterate方法与UnaryOperator

    前提:本人在翻看<Java核心技术II>的时候在p17的时候发现一段代码不是很明白.不知道为什么就输出了1,2,3,4,5,6,7,8,9,10,...也不知道n-n.add(BigInt ...