margin:外边距
padding:内边距
border:边框
编写一个HTML5文件，唯一 的标签是<h1>OZ</h1>。打开浏览器进入到调试界面，chrome为F12键。
在右下角为标签进行编译之后所展现的可视化的框架。可以看出是由4个依次增大的矩形框组成。可以看出，margin,border,padding是一层一层包裹着你的元素文本。看到这里你就可能明白了这3个的区别了。
把这4个框依次命名为text,padding,border,margin。
放置在text的时候，可以看到所对应的范围为整个OZ的本文大小，<h1>的 文本为整行，所以颜色会一直延伸整行。
然后通过<style>标签先进行size划分，这样就能更明白的看清楚所对应的区域。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
h1{
margin: 20px;
padding:40px;
border: 60px;
}
</style>
</head>
<body>
<h1>OZ</h1>
</body>
</html>
青色的这一块为padding属性，当然蓝色那一块属于标签里面的text文本了。那么border在哪里呢。把上面的style属性中把border设置为有颜色。
通过这4张图， 你应该就能明白margin，border以及padding还有你的文本之间的关系了。