CSS矩形盒子的四個邊界

標籤：size   add   images   padding   blog   透明圖   box   高度   擴充   

CSS下這些矩形盒子由標準盒模型描述。這個模型描述元素內容佔用空間。盒子有四個邊界：外邊距邊界margin edge, 邊框邊界border edge, 內邊距邊界padding edge 與 內容邊界content edge。

內容地區content area 是真正包含元素內容的地區。位於內容邊界的內部，它的大小為內容寬度 或 content-box寬及內容高度或content-box高。

如果 box-sizing 為預設值， width, min-width, max-width, height, min-height 與 max-height 控制內容大小。

內邊距地區padding area 用內容及可能的邊框之間的空白地區擴充內容地區。它位於內邊距邊界內部，通常有背景——顏色或圖片（不透明圖片蓋住背景顏色）. 它的大小為 padding-box 寬與 padding-box 高。

內邊距與內容邊界之間的空間可以由 padding-top, padding-right, padding-bottom, padding-left 和簡寫屬性 padding 控制。

邊框地區border area 是包含邊框的地區，擴充了內邊距地區。它位於邊框邊界內部，大小為 border-box 寬和 border-box 高。由 border-width 及簡寫屬性 border控制。

外邊距地區margin area用空白地區擴充邊框地區，以分開相鄰的元素。它的大小為 margin-box 的高寬。

外邊距地區大小由 margin-top, margin-right, margin-bottom, margin-left 及簡寫屬性 margin 控制。

在 外邊距合并 的情況下，由於盒之間共用外邊距，外邊距不容易弄清楚。

CSS矩形盒子的四個邊界