关于CSS外边距塌陷的问题

cyrils 发布于2019-08-29 13:24 / 625人阅读

摘要：关于外边距塌陷合并的问题主要资料来源定义块的顶部外边距和底部外边距有时被组合折叠为单个边框，其大小是组合到其中的最大外边距，这种行为称为外边距塌陷合并发生外边距塌陷的三种情况相邻的兄弟姐妹元素此时两个中间的距离并不是，而是。

关于CSS外边距塌陷（合并）的问题
主要资料来源：https://developer.mozilla.org...

定义

块的顶部外边距和底部外边距有时被组合（折叠）为单个边框，其大小是组合到其中的最大外边距，这种行为称为外边距塌陷（合并）

发生外边距塌陷的三种情况

相邻的兄弟姐妹元素

此时两个div中间的距离并不是60px，而是50px。就是说这里并不是两个margin的和，而是取的两者中较大的那个。

2.块级父元素与其第一个/最后一个子元素

如果块级父元素中，不存在上边框、上内边距、内联元素、清除浮动这四条属性（也可以说，当上边框宽度及上内边距距离为0时），那么这个块级元素和其第一个子元素的上边距就可以说“挨到一起了”。此时这个块级父元素和其第一个子元素就会发生上边距合并。即这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者。类似的，若块级父元素的margin-bottom与它的最后一个子元素的margin-bottom之间没有父元素的border、padding、inline content、height、min-height、max-height分隔时，就会发生下边距合并现象。

可以看出margin的变化，但是引用中说的清除浮动，没有明白具体指的是什么（div中如果设置了float是不会发生边界融合的）。如果父元素设置了border，那么margin也不会发生融合现象。

注意：

如果div中有内容，可以自行撑开，不会发生融合

父元素设置了padding、border，不会发生合并

父元素或者子元素设置了float或者position：absolute，不会发送融合（可以理解为BFC会阻止元素外边距合并。）

解决方案：

设置padding或者border

触发BFC

哪些元素会生成BFC？

根元素

float属性不为none

position为absolute或fixed

display为inline-block、table-cell、table-caption、flex、inline-flex

overflow不为vidible

3.空块元素

如果存在一个空的块级元素，border、padding、inline content、height、min-height都不存在，那么上下边距中间将没有任何阻隔，上下外边距将会合并。

这个段落的和下面段落的距离将为20px

这个段落的和上面段落的距离将为20px

可以理解成中间div宽度为0且上下边距融合，只取margin的最大值。

云服务器 GPU云服务器 html 的外边距外边距重叠 html外边距上下 html外边距颜色

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112578.html

关于CSS外边距塌陷的问题

摘要：关于外边距塌陷合并的问题主要资料来源定义块的顶部外边距和底部外边距有时被组合折叠为单个边框，其大小是组合到其中的最大外边距，这种行为称为外边距塌陷合并发生外边距塌陷的三种情况相邻的兄弟姐妹元素此时两个中间的距离并不是，而是。关于CSS外边距塌陷（合并）的问题主要资料来源：https://developer.mozilla.org... 定义块的顶部外边距和底部外边距有时被组合（...

SunZhaopeng 2019-08-01 17:35 评论0 收藏0
css随堂笔记（三）

摘要：随堂笔记三关于背景图片设置背景图片图片的路径背景图片位置方位名词背景位置如果只设置一个方位词，另外一个默认居中如果设置的值是两个方位词，与顺序无关数值背景位置如果设置的值是数字一个值得时候，表示水平方向的位移，垂直方向默认居中两个值得Css随堂笔记（三） 1 关于背景图片 A 设置背景图片：background-image：url(图片的路径)； B 背景图片位置： backgrou...

focusj 2019-04-23 13:26 评论0 收藏0
前端面试题-BFC(块格式化上下文)

摘要：一的概念规范解释块格式化上下文，是页面的可视化渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。我们可以使用实现清除浮动，这里就不多介绍了，想要了解的可以阅读前端面试题清除浮动。一、BFC 的概念 1.规范解释块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的...

Ryan_Li 2019-08-30 14:06 评论0 收藏0
前端面试题-BFC(块格式化上下文)

摘要：一的概念规范解释块格式化上下文，是页面的可视化渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。我们可以使用实现清除浮动，这里就不多介绍了，想要了解的可以阅读前端面试题清除浮动。一、BFC 的概念 1.规范解释块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的...

layman 2019-08-01 18:41 评论0 收藏0
【css】常见问题

摘要：将元素显示为内联元素，元素前后没有换行符。我们知道内联元素是无法设置宽高的，所以一旦将元素的属性设为，设置属性和是没有用的。这个属性值融合了和的特性，即是它既是内联元素，又可以设置和。 CSS 中 inline 元素可以设置 padding 和 margin 吗？行内元素设置width,height无效。但是设置margin和padding是有效的。行内非替换元素的外边距不会改变一个...

renweihub 2019-08-29 16:25 评论0 收藏0