每個HTML元素都被構建成一個具有相應空間大小的盒子。這個盒子包含了元素的內容、內邊距、邊框和外邊距。CSS將這個模型劃分為四個部分：內容（content）、內邊距（padding）、邊框（border）和外邊距（margin）。

內容 (Content)

div {
width: 200px;
height: 100px;
background-color: #eee;
}

這個盒子的內容部分被定義為200像素的寬度和100像素的高度，同時設置了一個淺灰色的背景顏色。

內邊距 (Padding)

div {
width: 200px;
height: 100px;
background-color: #eee;
padding: 10px;
}

在內部邊緣的內容周圍添加10像素的內邊距。這意味著將內容區域縮小10像素，以便給內邊距留出空間。

邊框 (Border)

div {
width: 200px;
height: 100px;
background-color: #eee;
padding: 10px;
border: 3px solid #333;
}

將一個3像素寬的實線邊框添加到div盒子的外部。

外邊距 (Margin)

div {
width: 200px;
height: 100px;
background-color: #eee;
padding: 10px;
border: 3px solid #333;
margin: 20px;
}

在div盒子的外部添加了20像素的外邊距。這個盒子現在是相對于它周圍的文檔流移動了20像素。