padding和margin的数值设置方式

 padding也是复合属性 padding:20px 上右下左都是20px 

 顺序是按照 上右下左的顺序来设置的（padding: 20px 15px 10px 5px ）

 分开设置： padding-top:20px

                    padding-right:15px

                    padding-bottom: 10px

                    padding-left:5px

 下面的会把上面的属性值覆盖： padding:20px

                                                    padding-top:40px 

 padding:10px 20px 15px：（ 上10px  左右20px 下15px）     

上下 10px 左右 20px ：（ padding:10px 20px）

上右下左的外边距都是30px ：margin:30px

上边距30 左右20 下40 ：（ margin:30px 20px 40px）

上下10 左右30 ：（  margin:10px 30px ）

也可以分开写：margin-top: 10px

                         margin-right: 20px

                         margin-bottom: 30px 

margin可以给负值，会超出边界 ： margin-left: -40px

下面的会把上面相同属性的值覆盖 ：margin:30px

                                                           margin-left:-30px 

padding属性用于设置内边距，即边框与内容之间的距离。

值的个数 /表达意思

padding:5px 1个值，代表上下左右都有5像素内边距；

padding:5px 10px 2个值，代表上下内边距是5像素 左右内边距是10像素；

padding:5px 10px 20px3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素；

padding:5px 10px 20px 30px 4个值，上是5像素，右是10像素，下是20像素，左是30像素，顺时针。

以上4种情况，实际开发都会遇到。

给指定盒子添加padding值之后：

---