解决外面外边距塌陷问题

最新推荐文章于 2024-10-01 20:12:28 发布

一颗西柚酱

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量80

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/howbeauty/article/details/126359792

版权

产生外边距塌陷情景

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .one {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-bottom: -30px;
            margin: 0 auto;

        }

        .two {
            width: 200px;
            height: 50px;
            background-color: gold;
        }
    </style>
</head>

<body>

    <div class="one">
        <div class="two">22222222</div>
    </div>

</body>

在这是我初始的设计


        .one {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-bottom: -30px;
            margin: 0 auto;
            /* ----------------加了margin */
            margin-top: 50px;

        }

        .two {
            /* ----------------加了margin */
            margin-top: 20px;
            width: 200px;
            height: 50px;
            background-color: gold;
        }

结果是你想的那样吗？

在这里插入图片描述

实际，此时父子的边距发生了重叠，父元素的外边距包裹着儿子的外边距，
要是儿子的外边距大于父亲的话，会以儿子的外边距为标准，即谁大取谁，即儿子的外边距包裹父亲

解决办法

儿子转为行内块元素

  .two {
            /* ----------------加了margin */
            /* 1.给儿子转为行内块元素 */
            display: inline-block;
            margin-top: 20px;
            width: 200px;
            height: 50px;
            background-color: gold;
        }

在这里插入图片描述

设置儿子为绝对定位，父亲相对定位

  <style>
        * {
            margin: 0;
            padding: 0;
        }

        .one {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-bottom: -30px;
            margin: 0 auto;
            /* ----------------加了margin */
            margin-top: 100px;

        }

        .two {
            /* ----------------加了margin */
            /* 1.给儿子转为行内块元素 */
            /* display: inline-block; */
            /* 2.定位 */
            position: absolute;
            margin-top: 20px;
            width: 200px;
            height: 50px;
            background-color: gold;
        }
    </style>

在这里插入图片描述

相对定位

   .two {
            /* 3.绝对定位，相对于自己 */
            position: relative;
            /* 相对定位不能用margin-top */
            /* margin-top: 40px; */
            /* 用top */
            top: 40px;
            width: 200px;
            height: 50px;
            background-color: gold;
        }

在这里插入图片描述