知方可补不足～CSS中margin,padding,border-style有几种书写规范

参考文章：

http://www.w3school.com.cn

在我们使用CSS时，经常看到margin:0 0,margin:0 5px,padding:0 5px 10px;而它们研究是什么含义呢，在WEB标准中，它们会有以下含义，它适合于CSS中的margin,padding,border-style等属性

第一种情况，四个值都有，它们的含义如下

属性：上　　右　　下　　左

第二种情况，只有三个值，它们的含义如下

属性：上　　右左　　下

第三种情况，只有两个值，它们的含义如下

属性：上下　　右左

第四种情况，只有一个值，它们的含义如下

属性：上下右左

注意，如果属性值为0，可以不加单元

直接是属性：0;

如果不为0，则必须加单元

如属性:10px;

下面是w3school中所举的例子，我直接拿来主义了，呵呵

例子 1

border-style:dotted solid double dashed; 

    上边框是点状
    右边框是实线
    下边框是双线
    左边框是虚线

例子 2

border-style:dotted solid double;

    上边框是点状
    右边框和左边框是实线
    下边框是双线

例子 3

border-style:dotted solid;

    上边框和下边框是点状
    右边框和左边框是实线

例子 4

border-style:dotted;

    所有 4 个边框都是点状



例子 1

margin:10px 5px 15px 20px;

    上外边距是 10px
    右外边距是 5px
    下外边距是 15px
    左外边距是 20px

例子 2

margin:10px 5px 15px;

    上外边距是 10px
    右外边距和左外边距是 5px
    下外边距是 15px

例子 3

margin:10px 5px;

    上外边距和下外边距是 10px
    右外边距和左外边距是 5px

例子 4

margin:10px;

    所有 4 个外边距都是 10px



例子 1

padding:10px 5px 15px 20px;

    上内边距是 10px
    右内边距是 5px
    下内边距是 15px
    左内边距是 20px

例子 2

padding:10px 5px 15px;

    上内边距是 10px
    右内边距和左内边距是 5px
    下内边距是 15px

例子 3

padding:10px 5px;

    上内边距和下内边距是 10px
    右内边距和左内边距是 5px

例子 4

padding:10px;

    所有 4 个内边距都是 10px