margin-top的错误用法

最新推荐文章于 2021-02-11 20:18:10 发布

IKnow00

最新推荐文章于 2021-02-11 20:18:10 发布

阅读量356

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_40457310/article/details/78690520

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今天写静态页面时发现了一个自己曾经没有发现的错误,css的margin-top属性.

<body>
<div id="container">
    <div id="content">
    </div>
</div>
...

#container {
    width:500px;
    height:500px;
    background-color: lightblue;
}
#content {
    width: 100px;
    height: 100px;
    margin-top: 100px;
    background-color: lightred;
}

可以试一下这段代码会有什么效果, content块并没有相对父元素container有100px的顶部外边距, 而是相对于body. 这是为什么呢?
因为我们的container没有设置设置边框,使得content和container的顶部可以说粘在了一起. 所以给content设置margin-top就相当于给container设置.
解决方法有很多,
1.给父元素添加border
2.给父元素添加padding-top
3.给父元素添加overflow:hidden
4.给父元素或子元素添加float:..
5.给父元素或子元素设置position:absolute