【CSS】垂直外边距折叠

来源：互联网发布：linux 查询连接ip 编辑：程序博客网时间：2024/04/30 17:49

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

根元素（HTML元素）的外边距不会被折叠
外边距折叠不仅是兄弟元素之间，子元素和父元素垂直方向上的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>

这一段代码执行下来，效果如图所示。
这里写图片描述
.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。

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

阅读全文

0 0