<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin</title>
<style>
*{padding:0; margin:0; border:0;}
.father{
width: 500px;
height: 500px;
background: red;
}
.son{
width: 100px;
height: 100px;
background: green;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son">高度为100px，margin-top为100px。</div>
</div>
</body>
</html>
这个例子我设置了margin-top为100px，效果如下：
这并不是我们想要的效果啊，我们希望子元素的上部距离父元素的上部为100px，可是我们看到的却是父元素的上部距离浏览器页面的上部有100px的距离，这是为什么呢？哪里出现问题了呢？
实际上这是因为当父元素没有设置padding值以及border值时，出现了一个bug–父元素的上方与子元素的上方完全重合在了一起，无法分开。所以才会导致上述这种父元素和子元素同时向下的情况。
对于这种问题解决方法有下面几种：
方法一：给父元素添加padding-top值
方法二：给父元素添加border值
方法三：给父元素添加属性overflow:hidden;
方法四：给父元素或者子元素声明浮动float
方法五：使父元素或子元素声明为绝对定位：position:absolute;
方法六：给父元素添加属性 overflow:auto; positon:relative；（注：此方法为后续添加，感谢博友@小精灵Pawn提供此方法）
方法一：基于例6，在父元素的css代码中添加padding-top:1px;效果如下：
方法的唯一缺点就是增加了1px的误差。
方法二：基于例6，在父元素的css代码中添加border-top:1px solid transparent;效果如下：
同样达到了效果， 缺点同方法一。
方法三：基于例6，在父元素的css代码中添加overflow:hidden;效果如下：
同样达到了效果，并且没有任何误差的存在。堪称perfect!!!!
方法四：给父元素或者子元素声明float;基于例6，在子元素css代码添加float:left;或者在父元素css代码添加float:left;均达到效果，这里不再展示相同的图片。
优点：没有像素的误差。 缺点：float有时是不必要的。
方法五：给父元素或者子元素添加position:absolute;属性。 同样达到效果。
优点：同方法四。 且只要我们不使用top和left也不会有任何影响，所以这也是一种不错的方法。
