在使用css布局的过程中，经常会使用padding，margin，border来调整元素的内边距外边距及边框来控制我们元素的位置边框的样式风格等等，那么如何正确的使用这几个样式呢
工具/原料
editplus
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>其结果输出如下
margin的使用
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>输出结果如下
padding的使用
1、padding样式被用来设置元素的粝简肯惧内边距，padding只给一个值，那么就是对四个边设置同样的内边距，padding给两个值，第一个值表示上下内边距，第二个值表示左右内边距padding给四个值，第一个值表示上内边距，第二个表示右内边距，第三个表示下内边距，第四个表示左内边距以以下div为例，对不同情况下的内边距设置值<div style="padding:50px;border:2px solid red"> <p style="border:2px solid #ccc">这个div演示都相同内边距</p></div><div style="margin-top:10px;margin-bottom:10px;padding:10px 50px;border:2px solid red"> <p style="border:2px solid #ccc">这个div演示2个相同的内边距</p></div><div style="padding:10px 20px 50px 100px;border:2px solid red"> <p style="border:2px solid #ccc">这个div演示不同边的内边距</p></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演示不同边的内边距</p></div>输出结果如下
