第一个子元素的margin-top和最后一个子元素的margin-bottom越界问题
当父元素没有边框border时，子元素加margin-top（这里以第一个子元素的 margin-top为例），会出现 margin-top加在父元素上的bug。
解决方法有四种：1.给父元素加border。
2.给父元素加padding。
3.给父元素加overflow:hidden。
4.(推荐使用) 给父元素加前置内容生成。
css 四种方法：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | #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页面：
1 2 3 | <div id="parent"> <div id="child"></div> </div> |
