Div嵌套引起子元素的margin－top不起作用

最新推荐文章于 2022-10-22 00:48:12 发布

架构小生

最新推荐文章于 2022-10-22 00:48:12 发布

阅读量1k

点赞数

分类专栏： Web前端文章标签： css margin-top div

本文链接：https://blog.csdn.net/shishaobo/article/details/53536859

版权

Web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近研究css中遇到一个问题，业务情景是这样的：在body内，有两个div，div1是父元素，div2是子元素，设置div2的margin-top引起div1的变化，div2却没有变化。
先上代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>divtest</title>
        <style type="text/css">
            body {
                margin: 0;
                padding: 0px;
            }
            #div1 {
                width: 200px;
                height: 200px;
                background: yellow;
            }

            #div2 {
                height: 100px;
                width: 100px;
                background: red;
                margin: 20px;
            }
        </style>
    </head>

    <body>

        <div id="div1">
            <div id="div2">
</div>
</div>
    </body>

</html>

效果如下：

目前具体的理论原因我没有研究明白，但是一些解决方案可以解决这个问题：
1.div1设置border属性
2.div2设置position为absolute或者relative，并且设置top left等属性。
3.div1可以通过设置padding属性。

架构小生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Div嵌套引起子元素的margin－top不起作用

欢迎使用Markdown编辑器写博客最近研究css中遇到一个问题，业务情景是这样的：在body内，有两个div，div1是父元素，div2是子元素，设置div2的margin-top引起div1的变化，div2却没有变化。先上代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>di
复制链接

扫一扫