CSS外边距合并(塌陷/margin越界)
原文
简书原文:https://www.jianshu.com/p/5f18f12cd162
大纲
1、什么是外边距合并?(折叠外边距)
2、外边距带来的影响
3、折叠的结果
4、产生折叠的原因
5、出现的情况
1、什么是外边距合并?(折叠外边距)
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。而左右外边距不合并。
在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。
注释:只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
2、外边距带来的影响
外边距带来的影响有很多种说法,有说是margin越界,也有说是外边距塌陷,但其实本质上都是外边距合并的的表现。
3、折叠的结果
两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。
两个外边距一正一负时,折叠结果是两者的相加的和。
4、产生折叠的原因
而根据w3c规范,两个margin是邻接的必须满足以下条件
4.1、必须是处于常规文档流(非float和绝对定位)的块级盒子,并且处于同一个BFC当中。
4.2、没有线盒,没有空隙(clearance,下面会讲到),没有padding和border将他们分隔开
4.3、都属于垂直方向上相邻的外边距,可以是下面任意一种情况:
a:元素的margin-top与其第一个常规文档流的子元素的margin-top
b:元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top
c:height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom
d:高度为0并且最小高度也为0,不包含常规文档流的子元素,并且自身没有建立新的BFC的元素的margin-top和margin-bottom
5、出现的情况
5.1、两个不同的div的上下外边距合并
<html>
<head>
<style type="text/css">
* {margin:0;padding:0;border:0;
}
#d1 {width:100px;height:100px;margin-top:20px;margin-bottom:20px;background-color:red;
}
#d2 {width:100px;height:100px;margin-top:10px;background-color:blue;
}
</style>
</head>
<body>
<div id="d1">
</div><div id="d2">
</div><p>请注意,两个 div 之间的外边距是 20px,而不是 30px(20px + 10px)。</p>
</body>
</html>
5.2、内外div之间外边距合并(子元素越界或者说margin越界)
<!--这种情况也叫做子元素越界或者margin越界margin越界(第一个子元素的margin-top和最后一个子元素的margin-bottom的越界问题) 以第一个子元素的margin-top 为例:当父元素没有边框border时,设置第一个子元素的margin-top值的时候,会出现
margin-top值加在父元素上的现象
-->
<html>
<head>
<style type="text/css">
* {margin:0;padding:0;border:0;
}#outer {width:300px;height:300px;background-color:red;margin-top:20px;
}#inner {width:50px;height:50px;background-color:blue;margin-top:10px;
}</style>
</head><body><div id="outer"><div id="inner"></div>
</div><p>注释:请注意,如果不设置 div 的内边距和边框,那么内部 div 的上外边距将与外部
div 的上外边距合并(叠加)。</p>
</body>
</html>
5.3、多个子元素外边距合并
<!--只有当前一个子级的宽高为0的时候,换句话说,前一个子级元素没有办法限制后一个子
级的margin的越界的时候才会出现这种情况(当然首先父级也无法限制子级的margin越界才
可以)
-->
<html>
<head><meta charset="UTF-8"><title>盒子模型</title><style>*{margin:0;padding:0;}body{text-align:center;}div{width:200px;height:200px;margin:0 auto;}#div1{margin-top:10px;background:red;}#div11{margin-top:20px;width:0;height:0;background:yellow;}#div12{margin-top:30px;width:50px;height:50px;background:blue;}</style>
</head>
<body><div id="div1"><div id="div11"></div><div id="div12"></div></div>
</body>
</html>
参考网站
http://www.w3school.com.cn/css/css_margin_collapsing.asp
https://www.cnblogs.com/wangjiaojiao/p/4659429.html
https://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html
转载于:https://www.cnblogs.com/shcrk/p/9311273.html
CSS外边距合并(塌陷/margin越界)相关推荐
- CSS外边距合并问题以及方法
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝 ...
- 5、CSS 外边距合并
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 1.外边距合并 外边距合并(叠加)是一个相当简单的概念.但是,在实践中 ...
- CSS外边距合并和CSS清除浮动
外边距合并 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网页 ...
- html外边距合并,CSS 外边距合并问题
小鸡炖蘑菇炖小鸡 你好:外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者.外边距合并外边距合并(叠加)是一个相当简单的概念. ...
- html css外边距,CSS外边距合并
块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距,其大小是组合到其中的最大外边距,这种行为称为外边距塌陷(margin collapsing),有的地方翻译为外边距合并. 发生外边距塌陷的三种 ...
- 详解css外边距折叠(margin collapsing)
外边距折叠指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距,本文详细的介绍了一下css外边距折叠的实现,分为3种情况,非常具有实用价值,需要的朋友可以参考下 前文 这是的一个经典的老 ...
- css 外边距合并问题
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距合并 外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网 ...
- 浅谈CSS外边距合并
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 一.发生外边距合并的三种情况: 1.相邻兄弟元素 eg1: #div1 {width: 100px;height: 100px;mar ...
- 在html中设置外边距,CSS外边距设置属性margin用法
本文向大家描述一下CSS外边距属性margin的用法,设置外边距的最简单的方法就是使用margin属性,这个属性接受任何长度单位.百分数值甚至负值,相信本文介绍一定会让你有所收获. CSS外边距 围绕 ...
- html设置外边距不合并,CSS外边距合并代码
请看下面的图,就对边距的理解很清晰了. 我习惯把 图中所示的margin边界称为外边距,padding填充部分称之为内边距.设置外边距最好的一个方法就是设置margin值,同理,设置内边距的最好 办法 ...
最新文章
- C++中的参数传递方式:传值、传地址、传引用总结
- python输出指定字符串_Python输出指定字符串的方法
- deepin15.7挂载/home到单独的分区:
- [论文阅读] Deep Automatic Natural Image Matting
- GitHub 开源跨平台神器 Electron 实践 | 技术头条
- 【NOIP2013提高组T3】加分二叉树
- 通过elasticsearch对日志进行搜索热词统计
- 修改linux文件权限命令:chmod超级详细讲解
- Ubuntu18.04中安装virtualenv和virtualenvwrapper
- SCT2620MRER,替代TP54240,TPS54260,3.8V-60V Vin,2.5A,高效、频率可调、降压DCDC转换器
- 微信小程序开发 - 起步
- fspecial,imfilter
- 卸载趋势杀毒软件的步骤
- 中央农村工作会议释放重要信号,AI 技术助力农业的十种路径,未来可期
- C#创建和部署Windows Service程序
- 微信小程序优惠券到期提醒功能设定指引
- 浪潮服务器怎么重做raid 、设置pxe 启动
- 计算机看服务代码,帮我查 下戴尔笔记本服务代码 25822644085 服务编号 BV24VP1 (电脑出厂日期,配置)...
- Android传输助手,电脑手机传输助手
- 怎么破解wifi密码?如何破解无线路由器密码?
热门文章
- envi反演水质参数_基于大气校正法的Landsat 8 TIRS地表温度反演
- mysql order优化2019_mysql 增加排序 性能差很多 怎么优化
- 绘制神经网络工具汇总(重要)
- 神经网络结构可视化工具总结实践大全
- Markdown编辑器初步使用
- python-random
- mysql怎么另存为_怎么把mysql中的数据库复制到另一台电脑的mysql上?
- kubernetes kubeadm init kube-apiserver.yaml already exists
- 漂亮的thinkphp 跳转页封装
- html语言的前景,HTML5语言的优势有哪些?2021年还有前景么?