css中的padding，margin，border应该如何使用
1、border为元素设置边框，一个通常的习惯是对四个边进行整体设置，
例如:border:2px solid #ccc; 其含义为为元素设置一个颜色为#ccc的2px粗细的实线边框！2px为边框的厚度，solid表示边框样式为实线，关于border样式还有很多种，有时间再细讲，#ccc为边框的颜色
以下数据为例，在div中创建2个不同的边框
<div style="border:5px solid red">
这个div1拥有一个厚度为5px颜色为红色的实线边框
</div>
<div style="height:10px"></div>
<div style="border:2px solid #ccc">
这个div1拥有一个厚度为2px颜色为灰色的实线边框
</div>
其结果输出如下
2、除了使用以上方法快速创建边框外，有些特殊情况我们需要对边框的上下左右进行单独创建边框，这就需要使用border-left,border-right,border-top,border-bottom这四个样式对边框的四个边进行单独设置
以以下div为例，分别设置四条边的边框，为方便演示我们添加了一个宽高
<div style="width:200px;height:200px;
border-top:2px solid red;
border-right:3px solid green;
border-bottom:4px solid #ccc;
border-left:5px solid #000">
这四个方向的边框都不一样
</div>
其结果输出如下
1、margin样式被用来设置元素的外边距，
margin只给一个值，那么就是对四个边设置同样的外边距，
margin给两个值，第一个值表示上下外边距，第二个值表示左右外边距
margin给四个值，第一个值表示上边距，第二个表示右边距，第三个表示下边距，第四个表示左边距
以以下div为例，对不同情况下的外边距设置值
<div style="border:2px solid red">
<div style="border:2px solid #ccc;margin:10px">四个相同的外边距</div>
<div style="border:2px solid #ccc;margin:50px 60px">2个不同的外边距</div>
<div style="border:2px solid #ccc;margin:30px 60px 20px 100px">四个不同的外边距</div>
</div>
输出结果如下
2、margin除了以上设置外边距的方式外，以可以单独对每个方向设置外边距，这就需要用到margin-top,margin-right,margin-bottom,margin-left这四个样式了，如下示例设置div的四个方向的外边距,为方便演示我在外层加个div
<div style="border:2px solid red">
<div style="margin-top:30px;margin-right:60px;margin-bottom:20px;margin-left:100px">
四个方向不同的外边距
</div>
</div>
输出结果如下
1、padding样式被用来设置元素的内边距，
padding只给一个值，那么就是对四个边设置同样的内边距，
padding给两个值，第一个值表示上下内边距，第二个值表示左右内边距
padding给四个值，第一个值表示上内边距，第二个表示右内边距，第三个表示下内边距，第四个表示左内边距
以以下div为例，对不同情况下的内边距设置值
<div style="padding:50px;border:2px solid red">
<p style="border:2px solid #ccc">这个div演示都相同内边距
</div>
<div style="margin-top:10px;margin-bottom:10px;padding:10px 50px;border:2px solid red">
<p style="border:2px solid #ccc">这个div演示2个相同的内边距
</div>
<div style="padding:10px 20px 50px 100px;border:2px solid red">
<p style="border:2px solid #ccc">这个div演示不同边的内边距
</div>
输出结果如下图所示
2、paddint除了以上设置内边距的方式外，以可以单独对每个方向设置外边距，这就需要用到padding-top,padding-right,padding-bottom,padding-left这四个样式，例如以以下div为例，针对每个边设置不同的内边距
<div style="border:2px solid red;
padding-top:10px;
padding-right:20px;
padding-bottom:50px;
padding-left:100px;
">
<p style="border:2px solid #ccc">这个div演示不同边的内边距
</div>
输出结果如下
