web前端开发基础------外边距折叠现象

最新推荐文章于 2024-05-05 18:17:26 发布

搁浅小泽

最新推荐文章于 2024-05-05 18:17:26 发布

阅读量175

点赞数

文章标签：前端 html css

本文链接：https://blog.csdn.net/m0_64148419/article/details/134582212

版权

引言

在设置样式时，需要遵循先整体再细节，先通用样式再特殊样式的顺序进行设置

一，什么是外边距折叠现象呢？

外边距折叠

定义：外边距折叠是指相邻的两个或者多个外边距（margin）在垂直方向会合并一个外边距，数值取较大的垂直外边距。

通常有如下两种情况

1，两个块级元素为标准流中两个相邻的兄弟块级元素，垂直外边距会折叠，以较大的垂直外边距为准。

2，父级块元素和标准流下的第一个子级元素之间也会发生外边距折叠现象。

二，示例代码

<!DOCTYPE html>
<html lang="en">
<head>

   外边距折叠现象的两种情况展示 -->
    <style type="text/css">
        #top{
            width: 200px;
            height: 200px;
            background: red;
            margin-bottom: 50px;
        }
        #buttom{
            width: 200px;
            height: 200px;
            background: blue;
            margin-top: 100px;
        }

        #father{
            width: 500px;
            height: 300px;
            background: pink;
            margin-top: 100px;
        }

        #son{
            width: 200px;
            height: 200px;
            background: red;
            margin-top: 50px;
        }
    </style>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>这是兄弟间的上下外边距折叠现象，此时兄弟之间的上下边距为100px</p>
    <div id="top"></div>
    <div id="buttom"></div>
    <p>这是父子之间的外边距折叠现象</p>
    <div id="father">
        <div id="son"></div>
    </div>
</body>
</html>