CSS教程:margin,padding,border

文章簡介：CSS中margin,padding,border-style有幾種書寫規範.

在我們使用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