父子嵌套块-margin外边距合并-测试

最新推荐文章于 2023-08-01 15:26:14 发布

souuuuuux

最新推荐文章于 2023-08-01 15:26:14 发布

阅读量156

点赞数

分类专栏： html-css练手

本文链接：https://blog.csdn.net/soraru/article/details/117685754

版权

html-css练手专栏收录该内容

10 篇文章 0 订阅

订阅专栏

！margin-嵌套块：margin垂直合并，取大值！

解决方案-1.父盒子加【上】边框，

2.父盒子加【上】padding

3.父盒子加overflow:hidden

4.others:浮动，固定，绝对定位

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
        ！margin-嵌套块：margin垂直合并，取大值！
        解决方案-1.父盒子加【上】边框，
                2.父盒子加【上】padding
                3.父盒子加overflow:hidden
                4.others:浮动，固定，绝对定位

            1.父盒无border 
            ①子标准-margin被大的一方合并
            ②子浮动-margin不合并
            
            2.父盒有【上】border
             ①子标准-margin不合并
             ②子浮动-margin不合并
              
        */
        .box {
            width: 500px;
            height: 200px;
            background-color: pink;
            margin: 10px auto;
            /* 子盒子margin依然是25px，且整体父子嵌套离上浏览器边界距离是25px
                父盒子margin依然是10px，但父上margin被子合并。
             */
            border-bottom: 1px solid black;
            /* border-top: 5px solid green; */
        }

        .zi {
            width: 450px;
            height: 150px;
            background-color: purple;
            margin: 25px;
            /* 子元素加【浮动】-margin不合并，对父元素无影响 */
            /* float: left; */
        }
    </style>

</head>

<body>
    <div class="box">
        <div class="zi">我是孩子</div>
    </div>
</body>

</html>