css 盒模型

一個web頁面由許多html元素組成，而每個html元素均可以表示爲一個矩形的盒子，CSS盒模型正是描述這些矩形盒子的存在。

MDN的描述：

When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard CSS basic box model. CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes.

Every box is composed of four parts (or areas), defined by their respective edges: the content edge, padding edge, border edge, and margin edge.

CSS盒模型有四條邊：外邊距邊、邊框邊、內填充邊、內容邊（Content edge、Padding edge、Border edge和Margin edge），四條邊由內到外把它劃分爲四個區域：內容區域、內邊距區域、邊框區域、外邊距區域（Content area、Padding area、Border area和Margin area）。

• 內容區域（content area ）是包含元素真實內容的區域。
• 內邊距區域（padding area） 延伸到包圍padding的邊框。若是content area設置了背景、顏色或者圖片，這些樣式將會延伸到padding上。
• 邊框區域（border area ）是包含邊框的區域，擴展了內邊距區域。
• 外邊距區域（margin area）用空白區域擴展邊框區域，以分開相鄰的元素。

經過CSS屬性（width、height、padding、border和margin）來控制它們的尺寸。