关于 margin跟padding的区别
1.首先弄清楚什么事元素：
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
就是：元素=标签+元素的内容，而内容可以有也可以没有。
参考：http://www.w3school.com.cn/html/html_elements.asp
2.理解每个元素都有border属性。
没有设置border时，border默认为0.
3.margin和padding 他们都是围绕这个border这个变化的。
如下面
margin：
<html>
<body>
<p style="background:red; margin-top:200px; border: 1 solid">
这个段落没有指定外边距。
</p>
</body>
</html>
说明：设置margin后 p元素就会相对body向下移动200px；(你可以去掉margin-对比一下)
padding：
<html>
<body>
<p style="background:red; padding-top:200px; border: 1 solid">
这个段落没有指定外边距。
</p>
</body>
</html>
说明：设置padding后 p元素就会相对border向下移动200px；就是说元素border变的宽了200px；
你可以用下面的列子对比
<html>
<body>
<p style="background:red; margin-top:200px;padding-top:200px; border: 1 solid">
这个段落没有指定外边距。
</p>
</body>
</html>
注意：一定要理解元素的定义和每个元素都有border属性。