子元素设置margin-top会影响父元素

问题描述：当我只给子元素设置了margin-top当时候，父元素却也跟着一起改变了。

代码部分：

<style>
	.outer{
		width: 200px;
		height: 200px;
		background-color: #eee;
	}
	.inner{
		width: 50px;
		height: 50px;
		background-color: green;
		margin-top: 20px;
	}
	</style>
	<div class="outer">
		<div class="inner"></div>
	</div>

原因：
当同级或嵌套的盒元素之间没有非空内容、padding或border分隔时，margin将会共享。

解决办法：
1、在父元素和子元素之间添加内容。
2、给父元素设置padding或border。
3、给父元素设置overflow:hidden;
4、给父元素或子元素设置浮动或绝对定位。