在 CSS 中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。之前一直理解有錯誤，認為width 和 height是元素容器的寬和高。
盒子模型
css中盒子模型包含屬性margin、border、padding、width與height，他們可以把它轉移到我們日常生活中的盒子（箱子）上來理解，日常生活中所見的盒子也具有這些屬性，所以叫它盒子模式。那么內容就是盒子里裝的東西（element）；而填充（padding）就是怕盒子里裝的東西（貴重的）損壞而添加的泡沫或者其它抗震的輔料；邊框（border）就是盒子本身了；至於邊界（margin）則說明盒子擺放的時候的不能全部堆在一起，要留一定空隙保持通風，同時也為了方便取出嘛。
css中width與height的計算方法
在 CSS 中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的尺寸。
但是在瀏覽器中實際的寬度與高度的值是按width=margin-left + margin-right + padding-left + padding-right + width與height=margin-left + margin-right + padding-left + padding-right + height這個計算的。所以當我們布局一個網頁的時候，經常會遇到這樣的一種情況，那就是最終網頁成型的寬度或是高度會超出我們預先的計算，其實就就是所謂的CSS的盒模型造成的。因此在我們布局網頁的時候要將這一部分內容計算在內。
例如：#div{margin:10px;padding:10px;border:1px;width:100px;height:100px;} 他的實際width為142px ，height為142px。