所有頁面中的元素都可以看成是一個盒子，佔據着一定的頁面空間。一般來說這些被佔據的空間往往都要比單純的內容要大。換句話說，可以通過調整盒子的邊框和距離等參數，來調節盒子的位置。
一個盒子模型由content（內容）、border（邊框）、padding（間隙）和margin（間隔）這4個部分組成，如下圖所示：![]()
一個盒子的實際寬度（或高度）是由content+padding+border+margin組成的。在CSS中可以通過設定width和height的值來控制content的大小，並且對於任何一個盒子，都可以分別設定4條邊的各自的border、padding和margin。因此只要利用好盒子的這些屬性，就能夠實現各種各樣的排版效果。
盒子模型的這4個組成部分再直接點展示爲下圖：![]()
結合上圖，具體來說，即margin指的是元素與元素之間的距離；padding用於控制content與border之間的距離；border一般用於分離元素，border的外圍即元素的最外圍，因此計算元素實際的寬和高時，就要將border納入。