CSS邊框屬性? 邊框風格屬性 (border-style)

這個屬性用來設定上下左右邊框的風格，它的值如下：

·?????????none (沒有邊框，無論邊框寬度設為多大)

·?????????dotted (點線式邊框)

·?????????dashed (破折線式邊框)

·?????????solid (直線式邊框)

·?????????double (雙線式邊框)

·?????????groove (槽線式邊框)

·?????????ridge(脊線式邊框)

·?????????inset (內嵌效果的邊框)

·?????????outset (突起效果的邊框)

演示示例：分別使用none,dotted, dashed, solid, double, groove, ridge, inset, outset的CSS邊框風格屬性示例

邊框寬度屬性 (border-width)

這個屬性用來設定上下左右邊框的寬度，它的值如下：

·?????????medium (是缺省值)

·?????????thin (比medium細)

·?????????thick (比medium粗)

·?????????用長度單位定值。可以用絕對長度單位(cm, mm, in, pt,?pc)或者用相對長度單位?(em, ex,?px)。

演示示例：分別用medium, thin, thick和長度單位定制的CSS邊框寬度屬性示例

邊框顏色屬性 (border-color)

這個屬性用來設定上下左右邊框的顏色。例句如下：

.d5 {border-color:gray;border-style:solid;}

演示示例

邊框屬性 (border)

這個屬性是邊框屬性的一個快捷的綜合寫法，它包含border-width, border-style和border-color。例句如下：

.d1 {border:5px solid gray;}

演示示例?

單邊邊框屬性

上下左右四個邊框不但可以統一設定，也可以分開設定。

設定上邊框屬性，你可以使用border-top, border-top-width, border-top-style, border-top-color。

設定下邊框屬性，你可以使用border-bottom, border-bottom-width, border-bottom-style, border-bottom-color。

設定左邊框屬性，你可以使用border-left, border-left-width, border-left-style, border-left-color。

設定上邊框屬性，你可以使用border-right, border-right-width, border-right-style, border-right-color。

演示示例：設置單邊邊框屬性的示例

CSS邊距屬性

邊距屬性是用來設置頁面中一個元素所占空間的邊緣到相鄰元素之間的距離。

左邊距屬性 (margin-left)

這個屬性用來設定左邊距的寬度。示例如下：

.d1{margin-left:1cm}

演示示例

右邊距屬性 (margin-right)

這個屬性用來設定右邊距的寬度。示例如下：

.d1 {margin-right:1cm}

演示示例請參照左邊距屬性示例，只要將里面的margin-left改成margin-right即可。

上邊距屬性 (margin-top)

這個屬性用來設定上邊距的寬度。示例如下：

.d1 {margin-top:1cm}

演示示例請參照左邊距屬性示例，只要將里面的margin-left改成margin-top即可。

下邊距屬性 (margin-bottom)

這個屬性用來設定下邊距的寬度。示例如下：

.d1{margin-bottom:1cm}

演示示例請參照左邊距屬性示例，只要將里面的margin-left改成margin-bottom即可。

邊距屬性 (margin)

這個屬性是設定邊距寬度的一個快捷的綜合寫法，用這個屬性可以同時設定上下左右邊距屬性。

你可以為上下左右邊距設置相同的寬度。示例入下：

.d1 {margin:1cm}

你也可以分別設置邊距，順序是上，右，下，左。示例如下：

.d1 {margin:1cm 2cm 3cm 4cm}

上面的代碼表示，上邊距為1cm，右邊距為2cm，下邊距為3cm，左邊距為4cm。

演示示例：上下左右邊距寬度相同

演示示例：上下左右邊距寬度各不相同

?

CSS間隙屬性

間隙屬性(padding)是用來設置元素內容到元素邊界的距離。

左間隙屬性 (padding-left)

這個屬性用來設定左間隙的寬度。示例如下：

.d1{padding-left:1cm}

演示示例

右間隙屬性 (padding-right)

這個屬性用來設定右間隙的寬度。示例如下：

.d1 {padding-right:1cm}

演示示例請參照左間隙屬性示例，只要將里面的padding-left改成padding-right即可。

上間隙屬性 (padding-top)

這個屬性用來設定上間隙的寬度。示例如下：

.d1 {padding-top:1cm}

演示示例請參照左間隙屬性示例，只要將里面的padding-left改成padding-top即可。

下間隙屬性 (margin-bottom)

這個屬性用來設定下間隙的寬度。示例如下：

.d1{padding-bottom:1cm}

演示示例請參照左間隙屬性示例，只要將里面的padding-left改成padding-bottom即可。

間隙屬性 (padding)

這個屬性是設定間隙寬度的一個快捷的綜合寫法，用這個屬性可以同時設定上下左右間隙屬性。

你可以為上下左右間隙設置相同的寬度。示例入下：

.d1 {padding:1cm}

你也可以分別設置間隙，順序是上，右，下，左。示例如下：

.d1 {padding:1cm 2cm 3cm 4cm}

上面的代碼表示，上間隙為1cm，右間隙為2cm，下間隙為3cm，左間隙為4cm。

演示示例：上下左右間隙寬度相同

演示示例：上下左右間隙寬度各不相同

?

CSS盒子模式(Box Model)

CSS?中有個重要的概念，就是盒子模式?(Box model)。

胡戈的"一個饅頭引發的血案"中有個圓圈套圓圈娛樂城，而這個盒子模式套用這句話來說，就是方塊套方塊。

先看看下面這個圖，黑框包圍的一個方塊，就是一個盒子?(Box)。

盒子里由外至里依次是：

·?????????margin?邊距

·?????????border?邊框

·?????????padding?間隙?(也有人稱做補丁)

·?????????content (內容，比如文本，圖片等)

CSS?邊距屬性?(margin)?是用來設置一個元素所占空間的邊緣到相鄰元素之間的距離。

CSS?邊框屬性?(border)?用來設定一個元素的邊線。

CSS?間隙屬性?(padding)?是用來設置元素內容到元素邊框的距離。

?

CSS?背景屬性指的是?content?和?padding?區域。

CSS?屬性中的?width?和?height?指的是?content?區域的寬和高。

總結

以上是生活随笔為你收集整理的css边距设置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。