Collapsing margins(外边距合并)
开篇
块元素的上边距或下边距有时会合并为一个margin,这种情况称之为外边距的合并,即collapsing margins.
一个常见的css样式的bug
html&css:
<!DOCTYPE html>
<html><style type="text/css">html, body{width: 100%;height: 100%;padding: 0;margin: 0;}#main {width: 200px;height: 200px;background: yellow;}#sub {color: #fff;width: 200px;padding: 0;margin: 0;margin-top: 20px;background: black;}</style>
<body><div id="main"><div id="sub">this is sub block</div></div>
</body>
</html>
效果:
上图中父div包裹着子div,css的样式很明显想让子div与父容器有20px的margin-top,可是很不幸,父div和子div上边距重合了,而且莫名其妙的与body有了20px的上边距(body为白色背景区域)。
这个bug很常见,也经常被大家忽略,但是它却揭示了一个很重要的概念,即外边距合并(Collapsing margins)
,想要彻底解决这个问题(当然了,你随便在chrome里修修改改也可以调好,但你懂真正的原因吗?),还是得看W3C的官方规范,为了易于阅读,我截取了一段源自MDN的翻译:
外边距合并发生在下面三种基本情形:
1.毗邻元素Adjacent siblings
毗邻元素的外边距会合并(当靠后的元素 清除浮动 时除外)。2.毗邻元素Adjacent siblings
如果块元素的 margin-top 与它的第一个子元素之间没有border, padding, inline content, 或 clearance 分隔,或者块元素的 margin-bottom 与它的最后一个子元素之间没有padding, inline content, height, min-height, or max-height 分隔,那么外边距会合并。3.空块元素
如果块元素 margin-top 与 margin-bottom 之间没有border, padding, inline content, height, 与min-height来分隔, 那么它的上下外边距合并。
可以看到,上面的bug属于情况2,即只要为主div设置padding即可解决(或border等,视具体情况而论)。
Blog同步
Collapsing margins(外边距合并)相关推荐
- margin外边距合并问题以及解决方式
margin外边距合并问题以及解决方式汇总 简介 块级元素的上外边距和下外边距有时会合并(或折叠)为一个外边距,其大小取其中的最大者,这种行为称为外边距折叠(margin collapsing). 外 ...
- 「CSS」Margin Collapsing - 外边距合并
外边距合并在排版上带来非常大的便利,但是人们对其不甚了解,导致使用外边距的时候总是出现繁多问题,今日写下一片文章,总结一下外边距合并. 三种基本的外边距合并 只有上外边距和下外边距才会触发外边距合并, ...
- html css外边距,CSS外边距合并
块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距,其大小是组合到其中的最大外边距,这种行为称为外边距塌陷(margin collapsing),有的地方翻译为外边距合并. 发生外边距塌陷的三种 ...
- 030_CSS外边距合并
1. 外边距合并指的是, 当两个垂直外边距相遇时, 它们将形成一个外边距. 2. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 3. 外边距合并 3.1. 外边距合并(叠加)是一个相 ...
- 5、CSS 外边距合并
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 1.外边距合并 外边距合并(叠加)是一个相当简单的概念.但是,在实践中 ...
- 【温故知新】CSS学习笔记(外边距合并)
CSS外边距合并 外边距合并 使用margin定义块元素的垂直外边距时,可能会出现外边距的合并. 一.相邻块元素垂直外边距的合并 当上下相邻的两个块元素相遇的时候,如果上面的元素有下外边距margin ...
- 课时109.外边距合并现象(掌握)
我们先写一个案例,通过案例来了解 它们之间的水平距离就是两个间距的和 我们看完水平再来看垂直方向 在默认布局的垂直方向上,默认情况下外边距是不会叠加的,会出现合并现象,谁的外边距比较大就听谁的 本文转 ...
- CSS学习之外边距合并
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距合并 外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网 ...
- 前端:CSS/13/HTML引入CSS的方法,CSS表格属性,盒子模型,上下外边距合并
HTML引入CSS的方法 1,嵌入式 通过<style>标记,来引入CSS样式: 语法格式:<style type="text/css"></styl ...
最新文章
- Mocha BSM应用管理——Lotus Domino监控与管理
- php的sql语句用变量赋值,sql语句变量赋值
- 写给新手程序员的一封信
- rstudio 导出结果_RStudio如何完美导出包含中文的图
- uos配置 java 环境变量_CentOS 7.3 环境配置java和tomcat开机启动
- java 数据库操作教程_数据库基本操作:增删改查及联表操作
- js 函数节流和防抖
- SAKAI OAE汉化
- 安装ADB Interface驱动
- 学习记录之显示屏语言模块确定,星瞳学习
- Java--排序算法
- 截止失真放大电路_聊一下三极管截止、放大和饱和3种工作状态
- 转行学习IT技术要做哪些准备
- Word(二) Word2016 如何删除页眉的下划线
- 21_lua生成随机数
- 【18】CSS基础(3)——理解层叠式
- 做好企业站优化需从5个方面共同考虑
- 工控机常见问题与解决方法
- CSS实现DIV垂直水平居中
- 网站漏洞修复网站安全检测整体解决方案