解决当有父盒子存在，给子盒子加margin时不生效的问题

最新推荐文章于 2024-05-18 03:07:39 发布

陌一一

最新推荐文章于 2024-05-18 03:07:39 发布

阅读量447

点赞数

分类专栏： web前端开发文章标签： css html 前端 javascript 开发语言

本文链接：https://blog.csdn.net/a1598452168YY/article/details/127423974

版权

web前端开发专栏收录该内容

281 篇文章 15 订阅

订阅专栏

问题：创建了三个盒子，是三代关系，但是给所有的div加外边距时，子盒子的外边距不生效

代码：

<!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%;
        }
        #box{
            width: 500px;
            height: 500px;
            background-color: blue;
        }
        #parent{
            width: 300px;
            height: 300px;
            background-color:green;
        }
        #child{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        div{
            margin:50px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="parent">
            <div id="child"></div>
        </div>
    </div>
</body>
</html>

结果：

解决办法：在父盒子身上加：overflow：hidden；

加上以后的代码：

<!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%;
        }
        #box{
            width: 500px;
            height: 500px;
            background-color: blue;
            overflow: hidden;
        }
        #parent{
            width: 300px;
            height: 300px;
            background-color:green;
            overflow: hidden;
        }
        #child{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        div{
            margin:50px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="parent">
            <div id="child"></div>
        </div>
    </div>
</body>
</html>

结果：