【CSS】垂直外边距折叠

骑猪看日落 2022-06-05 10:56 346阅读 0赞

在CSS中，如果有两个以及两个以上的盒子（可以是兄弟元素，也可以不是）垂直排列，那么他们相邻的垂直外边距会被合并成一个外边距。margin值以较大的为准。

1.  根元素（HTML元素）的外边距不会被折叠
2.  外边距折叠不仅是兄弟元素之间，子元素和父元素垂直方向上的margin也会被折叠

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style> *{ margin: 0; padding: 0; } div{ width: 100px; height: 100px; } .box{ width: 120px; margin-top: 50px; background-color: orangered; } .item{ margin-top: 100px; background-color: pink; } </style>
    </head>
    <body>
    <div class="box">
        <div class="item"></div>
    </div>
    </body>
    </html>

这一段代码执行下来，效果如图所示。  
![这里写图片描述][SouthEast]  
.box的margin-top和.item的margin-top折叠成了100px,而不是加起来的150px;  
3. **水平外边距不会被折叠**  
4. 当有多个子元素时，只有第一个元素的margin-top和最后一个子元素的margin-bottom会和父元素的margin折叠**（元素没有宽高的情况除外）**  
5. 子元素同时是另一个元素的父元素，也会有margin折叠的情况。  
6. 负的外边距折叠，会从正的相邻外边距的最大值中扣除负的相邻外边距的绝对值的最大值

就上例来说 如果.box{margin-top:60px;}  .item{margin-top:-50px}那么他们的margin-top就是10px。

1.  创建了新BFC的元素不会出现外边距折叠现象。关于[如何创建BFC][BFC]

[SouthEast]: /images/20220605/67d80db5938d4a7cbf1101d77f2c1e13.png
[BFC]: http://blog.csdn.net/liu_jiachen/article/details/78631226

发表评论取消回复

表情：

评论列表（有 0 条评论，346人围观）

还没有评论，来说两句吧...

相关阅读

相关外边距的折叠

外边距的折叠 <style type="text/css"> .box1, .box2 { width

落日映苍穹つ/ 2023年10月06日 22:09/ 0 赞/ 124 阅读

相关 CSS 外边距合并

（原文：[https://www.w3school.com.cn/css/css\_margin\_collapsing.asp][https_www.w3school.com

系统管理员/ 2023年07月21日 06:12/ 0 赞/ 155 阅读

相关外边距折叠

原文链接: [外边距折叠][Link 1] 外边距折叠问题外边距折叠的概念在CSS中，两个或多个毗邻的普通流中的盒子（可能是父子元素，也可能是兄弟元素），在垂

野性酷女/ 2023年02月13日 03:55/ 0 赞/ 116 阅读

相关 CSS 外边距

CSS 外边距 ![在这里插入图片描述][20210325184513919.gif] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5n

痛定思痛。/ 2022年11月13日 04:29/ 0 赞/ 460 阅读

相关 CSS 外边距合并

CSS 外边距合并 ![在这里插入图片描述][20210325192055399.gif] > 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。 >

矫情吗；*/ 2022年10月22日 09:18/ 0 赞/ 312 阅读

相关 CSS外边距叠加

盒模型概念盒模型是css的基石之一，它指定元素如何显示及（在某种程度上）如何相互交互。页面上的每一个元素都被看做一个矩形框，这个框右元素的内容、内边距、

古城微笑少年丶/ 2022年08月07日 06:45/ 0 赞/ 390 阅读

相关【CSS】垂直外边距折叠

在CSS中，如果有两个以及两个以上的盒子（可以是兄弟元素，也可以不是）垂直排列，那么他们相邻的垂直外边距会被合并成一个外边距。margin值以较大的为准。 1. 根元素（H

骑猪看日落/ 2022年06月05日 10:56/ 0 赞/ 347 阅读

相关 css中外边距折叠原理及解决办法

原文章链接[点击打开链接][Link 1] 晚上没事的时候看看今天白天遗留的问题，果然看的次数再多也不如动动金手，之前也看了很多遍关于外边距折叠的文章，但都没有真正的理解，今

超、凢脫俗/ 2022年05月28日 03:30/ 0 赞/ 353 阅读

相关【CSS】margin(外边距)

CSS margin(外边距)属性定义元素周围的空间。 margin margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。 marg

不念不忘少年蓝@/ 2022年03月22日 08:26/ 0 赞/ 448 阅读

相关垂直外边距合并

今天在复习html标签时，看到w3c对块级元素有这么一条额外注释 > 默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。之前确实也知

蔚落/ 2022年03月17日 12:50/ 0 赞/ 373 阅读