第一个子元素的margin-top和最后一个子元素的margin-bottom越界问题

第一个子元素的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 >