【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. mac Latex dvipdfm 缺少字体错误 Failed to read UCS2/UCS4 TrueType cmap

    dvipdfmx 命令产生 ** ERROR ** Failed to read UCS2/UCS4 TrueType cmap... 错误的原因是没有把 simsun.ttf simkai.ttf ...

  2. 通用全局CSS样式

    PC全局样式 *{padding:0;margin:0;} div,dl,dt,dd,form,h1,h2,h3,h4,h5,h6,img,ol,ul,li,table,th,td,p,span,a{ ...

  3. 修改php默认的FastCGI模式为ISAPI模式的方法

    一.到www.php.net中下载PHP的ZIP文件包.注意版本要对应. 二.将sapi目录中的:php4isapi.dll复制到c:\php目录中. 三.进入虚拟主机管理平台的"网站管理& ...

  4. Emacs Org-mode中英文字体设置

    Emacs Org-mode中英文字体设置 Table of Contents 1. 缺省字体存在的问题 2. 解决方法 2.1. 环境说明 2.2. 思路和方法 2.3. emacs设置代码 2.4 ...

  5. Objective-C Operators and Expressions

    What is an Expression? The most basic expression consists of an operator, two operands and an assign ...

  6. Glide图片框架

    //加载圆形图片Glide.with(this).load(WSCAppStatic.WEB_KEFU_PHOTO_URL+ "?usercode=8120000315") .as ...

  7. 阻止除root外的其他用户登录

    在对系统进行某些更新时,你可能不希望用户登录,这时可以使用/ e t c / n o l o g i n文件,大多数系统都提供这个文件.一旦在/ e t c目录中使用t o u c h命令创建了一个名 ...

  8. access处理重复创建表的方法。

    第一种,使用MSysObjects表查找表名为当前创建表的名字的内容,相当于普通查询,但是access数据库有一个安全问题,就是有时候一开始是没有权限去调这些系统表的,这时可以再2007的access ...

  9. UVA 11584 Partitioning by Palindromes 划分回文串 （Manacher算法）

    d[i]表示前面i个字符划分成的最小回文串个数, 转移:当第i字符加进来和前面区间j构成回文串,那么d[i] = d[j]+1. 要判断前面的字符j+1到i是不是回文串,可以用Manacher算法预处 ...

  10. Pacman常用命令 文内搜索吧

    列出已经安装的软件包 https://wiki.archlinux.org/index.php/Pacman_(%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87)  维基 pa ...