内边距的折叠

最新推荐文章于 2023-08-02 11:12:52 发布

Double_路

最新推荐文章于 2023-08-02 11:12:52 发布

阅读量194

点赞数

分类专栏： CSS 文章标签： html5 css3

本文链接：https://blog.csdn.net/qq_44606245/article/details/109491759

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

内边距的折叠

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内边距的折叠</title>
    <style>
        .box1,.box2{
            width: 200px;
            height: 200px;
            font-size: 50px;
        }
        /* 
            垂直方向外边距重叠
            相邻的垂直外边距会发生重叠现象
                兄弟元素：相邻垂直外边距会取两者之间的较大值（两者都是正值）
                        一正一负则取两者的和
                        两个都是负值，取绝对值大的一方折叠
                        对于开发有利，不需要处理


                父子元素：相邻外边距，子元素的会传递给父元素（上外边距）
                        父子外边距的折叠，会影响到页面的布局，必须进行处理
                        处理方法：1.不用外边距   2.不要相邻
         */
        .box1{
            background-color: blanchedalmond;
            margin-bottom: 100px;
        }

        .box2{
            background-color: blue;
            margin-top: 100px;
            /* 没有效果，产生重叠 */
        }

        .box3{
            width: 200px;
            height: 200px;
            background-color: cyan;
        }
        .box4{
            width: 100px;
            height: 100px;
            background-color: brown;
            margin-top: 100px;
        }

        .box5{
            width: 200px;
            height: 100px;
            background-color: rgb(24, 179, 18);
            padding-top: 100px;
        }
        .box6{
            width: 100px;
            height: 100px;
            background-color: rgb(194, 22, 165);
        }

        .box7{
            width: 200px;
            height: 200px;
            background-color: rgb(24, 179, 18);
            border-top: 1px red solid;
        }
        .box8{
            width: 100px;
            height: 100px;
            background-color: rgb(194, 22, 165);
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>

    <div class="box3">
        <div class="box4"></div>
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div class="box5">
        <div class="box6"></div>
    </div>


    <br>
    <br>
    <br>
    <br>
    <br>
    <div class="box7">
        <div class="box8"></div>
    </div>
</body>
</html>

Double_路

关注

0
点赞
踩
0

收藏

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

内边距的折叠<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>内边距的折叠</title> <style> .box1,.box2{
复制链接

扫一扫