CSS 盒子模型(Box Model)

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

元素的寬度和高度

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

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

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

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

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

最終元素的總寬度計算公式是這樣的：

總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距

元素的總高度最終計算公式是這樣的：

總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距

margin屬性可以有一到四個值。/p>

• margin:25px 50px 75px 100px;
  • 上邊距為25px
  • 右邊距為50px
  • 下邊距為75px
  • 左邊距為100px
  
  
• margin:25px 50px 75px;
  • 上邊距為25px
  • 左右邊距為50px
  • 下邊距為75px
  
  
• margin:25px 50px;
  • 上下邊距為25px
  • 左右邊距為50px
  
  
• margin:25px;
  • 所有的4個邊距都是25px