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

当父元素没有边框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>