CSS 盒子模型(Box Model)

所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和佈局時使用。

CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。

盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。

下面的圖片說明了盒子模型(Box Model)：

不同部分的說明：

• Margin(外邊距)- 清除邊框外的區域，外邊距是透明的。
• Border(邊框)- 圍繞在內邊距和內容外的邊框。
• Padding(內邊距)- 清除內容周圍的區域，內邊距是透明的。
• Content(內容)- 盒子的內容，顯示文字和影象。

• 元素的寬度和高度

  重要:當您指定一個 CSS 元素的寬度和高度屬性時，你只是設定內容區域的寬度和高度。要知道，完整大小的元素，你還必須新增內邊距，邊框和外邊距。

  下面的例子中的元素的總寬度為300px：

  例項

  div { width: 300px; border: 25px solid green; padding: 25px; margin: 25px; }

  讓我們自己算算：
  300px (寬)
  + 50px (左 + 右填充)
  + 50px (左 + 右邊框)
  + 50px (左 + 右邊距)
  = 450px

  試想一下，你只有 250 畫素的空間。讓我們設定總寬度為 250 畫素的元素:

  例項

  div { width: 220px; padding: 10px; border: 5px solid gray; margin: 0; }