给子元素添加margin-top不生效，父元素受到影响的解决办法

最新推荐文章于 2023-11-08 16:31:13 发布

今天也要努力写代码

最新推荐文章于 2023-11-08 16:31:13 发布

阅读量812

点赞数 1

分类专栏： html css 文章标签： css html css3 html5

原文链接：https://blog.csdn.net/u012011360/article/details/41823125

版权

html 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

今天写css的时候遇到一个问题，当给子元素添加margin-top的时候，子元素不生效，反而父元素被添加上了，严重影响页面布局。

例子代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>给子元素添加margin-top，父元素也受到影响</title>
    <style type="text/css">
        *{
            margin:0;
            padding: 0;
        }
        .father{
            width:500px;
            height: 500px;
            background: #f00;
            /*注意这里代码*/
            /* padding-top:1px; */
            /* border:1px solid #fcc; */
            /* overflow: hidden; */

        }
        .son{
            width:200px;
            height: 200px;
            margin-top:200px;
            background: #0f0;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>