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属性。