[css] 解决问题---子元素设置margin-top，作用到父元素上

原创

wx5909dcbadae4c 2022-12-21 10:24:04 博主文章分类：css ©著作权

©著作权归作者所有：来自51CTO博客作者wx5909dcbadae4c的原创作品，请联系作者获取转载授权，否则将追究法律责任

[css] 解决问题---子元素设置margin-top，作用到父元素上_css

<!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:0;padding:0}
        /*父元素*/
        div{
            width:400px;
            height:400px;
            background-color:blue;
        }
        /*子元素*/
        p{
            width:200px;
            height:200px;
            background-color:orange;
            margin-top:40px;
        }

    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

[css] 解决问题---子元素设置margin-top，作用到父元素上_css_02

会发现子元素设置的margin-top作用与父容器上了，这其实是css外边距合并产生的。

1. 给父元素添加一个透明的边框

margin是边框与边框之间的距离，加上边框就好了

<!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:0;padding:0}
        /*父元素*/
        div{
            width:400px;
            height:400px;
            background-color:blue;
            border: 1px solid transparent;
        }
        /*子元素*/
        p{
            width:200px;
            height:200px;
            background-color:orange;
            margin-top:40px;
        }

    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

[css] 解决问题---子元素设置margin-top，作用到父元素上_.net_03

2.给子元素添加padding-top

<!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:0;padding:0}
        /*父元素*/
        div{
            width:400px;
            height:400px;
            background-color:blue;
                      
        }
        /*子元素*/
        p{
            width:200px;
            height:160px;
            background-color:orange;
            padding-top:40px;
        }

    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

[css] 解决问题---子元素设置margin-top，作用到父元素上_.net_04

3.给父元素添加float

形成独立的BFC区域

<!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:0;padding:0}
        /*父元素*/
        div{
            width:400px;
            height:400px;
            background-color:blue;
            float: left;
        }
        /*子元素*/
        p{
            width:200px;
            height:200px;
            background-color:orange;
            margin-top:40px;
        }

    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

4.给子元素添加float

形成独立的BFC区域

<!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:0;padding:0}
        /*父元素*/
        div{
            width:400px;
            height:400px;
            background-color:blue;
        }
        /*子元素*/
        p{
            width:200px;
            height:200px;
            background-color:orange;
            margin-top:40px;
            float: left;            

        }

    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

[css] 解决问题---子元素设置margin-top，作用到父元素上_css_05

5.给父元素添加overflow: hidden;

形成独立的BFC区域

<!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:0;padding:0}
        /*父元素*/
        div{
            width:400px;
            height:400px;
            background-color:blue;
            overflow: hidden;
        }
        /*子元素*/
        p{
            width:200px;
            height:200px;
            background-color:orange;
            margin-top:40px;
        }

    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>