盒子一共有四個屬性：分別為外邊距（margin)、邊框（border)、內邊距（padding)、內容（content).

關係如下圖所示：

而我們平常設定盒子的寬和高往往是指的內容的寬和高

div{

    width:200px;
    height:18px;

}

此段話代表content所佔大小為寬200畫素，高為100畫素；

而當我們增加其他三個屬性時

div{

    width:200px;
    height:18px;

    padding:20px;

    border:1px solid red;

    margin:10px;    

}
 

效果圖為：

所以說當改變盒子四個屬性中的任何一個的時候，盒子的總面積都會有所改變。

最後，盒子總大小的計算公式為：盒子的實際高度X盒子的實際寬度。

元素實際寬度（盒子的寬度）=左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界。

元素實際寬度（盒子的高度）=上邊界+上邊框+上填充+內容高度+下填充+下邊框+下邊界。

CSS HTML5