034-外边距的折叠

最新推荐文章于 2023-09-03 23:40:04 发布

一只老黄牛

最新推荐文章于 2023-09-03 23:40:04 发布

阅读量45

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_36150351/article/details/113487034

版权

前端专栏收录该内容

34 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zn">

<head>
    <meta charset="UTF-8">
    <title>外边距的折叠</title>

    <style>
        .box1,
        .box2 {
            width: 200px;
            height: 200px;
            font-size: 100px;
        }

        /* 
           垂直外边距的重叠（折叠） 
                - 相邻的垂直方向外边距会发生重叠现象
                - 兄弟元素
                    - 兄弟元素间的相邻垂直外边距会取两者间的较大值（两者都是正值）
                    - 特殊情况：
                        如果相邻的外边距一正一负，则取两者的和
                        如果相邻的外边距都是负值，则取两者中绝对值较大的

                    - 兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理


                - 父子元素
                    - 父子元素间相邻外边距，子元素的会传递给父元素（上外边距）
                    - 父子外边距的折叠会影响页面的布局，必须要进行处理
        */

        .box1 {
            background-color: #bfa;
            /* 设置一个下外边距 */
            margin-bottom: 200px;
        }

        .box2 {
            background-color: orange;
            /* 设置一个上外边距 */
            margin-top: 200px;
        }

        .box3 {
            width: 200px;
            height: 100px;
            background-color: #bfa;
            /* margin-top: 100px; */
            padding-top: 100px;
        }

        .box4 {
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>

<body>
    <!-- <div class="box1"></div>
    <div class="box2"></div> -->

    <div class="box3">
        <div class="box4"></div>
    </div>
</body>

</html>

一只老黄牛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
034-外边距的折叠

<!DOCTYPE html><html lang="zn"><head> <meta charset="UTF-8"> <title>外边距的折叠</title> <style> .box1, .box2 { width: 200px; height: 200px; font-size:
复制链接

扫一扫