什麼是區塊？

在網頁上顯示的內容範圍即是區塊，是由框線來劃分出區塊範圍。
接下來要介紹區塊相關屬性：border (框線) 、margin (對外間距) 、padding (對內間距) ～
此外，這三種屬性都可以分別設定上(top)、下(bottom)、左(left)、右(right)四邊，例如：border-left-style設定左方的框線樣式、margin-bottom設定與下方區塊的距離、padding-top設定與上方的內距。

框線屬性

• border-style 設定四個邊框的框線樣式，如：solid(實線)、dashed (虛線) 、dotted(點狀虛線)。
• border-color 設定框線顏色。
• border-width 設定框線粗細(px)。

前面介紹了許多框線屬性，若覺得逐條設定很麻煩，可以利用下面這個方式來快速設定～

• border 功用是不用逐一設定框線屬性，不同屬性值用空格隔開。

如果不想使用正正方方的框線，則可以使用以下的屬性～

• border-radius設定框線為圓角，寫入圓角的像素(數值越大代表圓角越圓)。
• border-image 設定框線圖片，如：url(圖片路徑) 、圖片邊框寬度(px)、圖片重複，不同屬性值用空格隔開。

框線間距

• margin設定區塊對外間距，數值為負數代表顯示的內容會超過區塊。
• padding 設定區塊對內間距，數值越大代表與內容距離越遠，且數值不可為負。

總結