今天写静态页面时发现了一个自己曾经没有发现的错误,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
2023
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
