上篇文章给童靴们介绍了盒模型的概念，这篇文章小编带大家学习一下盒模型相关的样式。（新来的童靴们去小白前端的主页，学习一下置顶的文章《深入理解盒模型》）。

内边距 padding

内边距也叫内填充，属性值可以是像素（px）或者是百分比（%）。

如果你给一个div元素各边都加10px的填充，如下,padding设置一个属性值，表示上下左右都有10px填充。

div {padding:10px;}

如果你想给元素各边设置不同数值的填充，如下，padding设置4个属性值，用空格隔开，分别表示上填充10px，右填充20px，下填充30px，左填充15px。

div {padding:10px，20px,30px,15px;}

当然，padding也可以接收两个属性值，如下，padding设置两个属性值，分别表示上填充和下填充是10px，左填充和右填充20px。

div {padding:10px 20px;}

单边内边距填充

通过使用下面四个单独的属性，分别设置上、右、下、左内边距：

• padding-top

• padding-right

• padding-bottom

• padding-left
  

童靴们看意思估计也猜出来了，使用这些属性可以单独的为某个边设置填充。

div{

padding-top:10px;

padding-right:20px;

padding-bottom:15px;

padding-left:30px;

}

div{

padding:10px 20px 15px 30px;

}

上面两种写法达到的效果是一样的。

外边距 margin

上篇文章中提到一个元素实际的宽高是不包括外边距的，因为它是元素外创建的额外的‘空白’。

margin与上面的padding属性值设置是一样的。这里小编就不在重复了。

margin有一个特殊的属性值，也是在页面布局中经常用到的auto。

这里给大家举个例子，如下

给它设置样式，一个宽高都是100px,黑色边框线的元素，给它设置上下外边距为0，左右外边距为auto。

我们来看一下浏览器中的效果：

我们在F12打开调试工具，能够在它的盒模型中看到，左右边距设置auto后值是一样的。没错，auto值让元素水平居中。

单边外边距属性

与内边距一样，外边距也有四个单边属性：

• margin-top

• margin-right

• margin-bottom

• margin-left

童靴们自己练习，这里我就不多说了。

爱学习的孩子运气不会差哦~

关注小白前端，持续收到文章推送！