当父元素没有边框border时,子元素加margin-top(这里以第一个子元素的 margin-top为例),会出现 margin-top加在父元素上的bug。
解决方法有四种:1.给父元素加border。
2.给父元素加padding。
3.给父元素加overflow:hidden。
4.(推荐使用) 给父元素加前置内容生成。
css 四种方法:
#parent{
width:300px;
height:200px;
background-color:yellow;
/*①给父元素加border*/
/*border:1px solid black;*/
/*②给父元素加padding*/
/* padding-top:10px;*/
/*③给父元素加overflow:hidden*/
/*overflow:hidden;*/
/*④ 给父元素加前置内容生成*/
}
#parent:before{
content:" ";
display:table;
}
#child{
width:100px;
height:50px;
background-color:red;
margin-top:50px;
}
这是html页面:
<div id="parent">
<div id="child"></div>
</div>