今天我們來看一張圖，它可以幫助我們更好地理解CSS的模型。以下是這張圖：

+---------------------------------+
|          HTML 元素框             |
|+-------------------------------+|
||      margin                   ||
||     +---------------------+   ||
||     |     border          |   ||
||     |    +-------------+  |   ||
||     |    |     padding |  |   ||
||     |    |    +--------+| |   ||
||     |    |    |   內容  || |   ||
||     |    |    |         || |   ||
||     |    |    +--------+| |   ||
||     |    |              | |   ||
||     |    +--------------+ |   ||
||     +---------------------+   ||
|                                 |
+---------------------------------+

這張圖展示了HTML元素每一個部分的框架結構。CSS模型分為兩大部分：盒模型和文本模型。其中盒模型包括的是一個HTML元素的邊框、內邊距、外邊距和內容； 文本模型包括的則是字體、行高、對齊方式等等。

在盒模型中，我們可以清晰看出每一部分所占的位置：外邊距、邊框、內邊距和內容。其中，外邊距是元素與其他元素之間的間隔，邊框是用來包住內容的，內邊距則是元素內容與邊框之間的間隔。

我們可以使用CSS來控制每一個元素框的不同部分。例如，我們可以使用margin屬性來改變元素與周圍元素之間的間隔。我們也可以使用padding屬性來改變元素內容與邊框之間的間隔。

現在你明白了CSS模型的基本概念，你將會更好地理解如何使用CSS控制HTML元素的樣式。