css中的padding，margin，border应该如何使用

在使用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>其结果输出如下

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>输出结果如下

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>输出结果如下图所示