當對一個文檔進行佈局（lay out）的時候，瀏覽器的渲染引擎會根據標準之一的 CSS 基礎框盒模型（CSS basic box model），將所有元素表示爲一個個矩形的盒子（box）。CSS 決定這些盒子的大小、位置以及屬性（例如顏色、背景、邊框尺寸…）。
每個盒子由四個部分（或稱區域）組成，其效用由它們各自的邊界（Edge）所定義（原文：defined by their respective edges，可能意指容納、包含、限制等）。如圖，與盒子的四個組成區域相對應，每個盒子有四個邊界：內容邊界 Content edge、內邊距邊界 Padding Edge、邊框邊界 Border Edge、外邊框邊界 Margin Edge。
內容區域 content area ，由內容邊界限制，容納着元素的“真實”內容，例如文本、圖像，或是一個視頻播放器。它的尺寸爲內容寬度（或稱 content-box 寬度）和內容高度（或稱 content-box 高度）。它通常含有一個背景顏色（默認顏色爲透明）或背景圖像。
如果 box-sizing 爲 content-box（默認），則內容區域的大小可明確地通過 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 屬性控制。如果 box-sizing 屬性被設爲 border-box，那麼邊框區域的大小可明確地通過 width、min-width, max-width、height、min-height，和 max-height 屬性控制。假如框盒上設有背景（background-color 或 background-image），背景將會一直延伸至邊框的外沿（默認爲在邊框下層延伸，邊框會蓋在背景上）。此默認表現可通過 CSS 屬性 background-clip 來改變。
外邊距區域 margin area 由外邊距邊界限制，用空白區域擴展邊框區域，以分開相鄰的元素。它的尺寸爲 margin-box 寬度 和 margin-box 高度。
外邊距區域的大小由 margin-top、margin-right、margin-bottom、margin-left，和簡寫屬性 margin 控制。在發生外邊距合併的情況下，由於盒之間共享外邊距，外邊距不容易弄清楚。
最後，請注意，除可替換元素外，對於行內元素來說，儘管內容周圍存在內邊距與邊框，但其佔用空間（每一行文字的高度）則由 line-height 屬性決定，即使邊框和內邊距仍會顯示在內容周圍。