html CSS 盒模型

CSS 盒模型
網頁設計中的每個元素都是長方形的盒子。盒子的尺寸是怎樣精確計算的，請看：

如果是 Firebug 使用者的話(基本和前端有關的都會用到 Firebug 吧 – 糖伴西紅柿)，就會很熟悉下面的圖表了。
這個圖表很好地展示了作用於頁面上任意盒子的數值。

注意以上兩個例子中，margin 都是白色的。Margin 比較特別，它不會影響盒子本身的大小，但是它會影響和盒子有關的其他內容，因此 margin 是盒模型的一個重要的組成部分。
盒子本身的大小是這樣計算的：
Width width + padding-left + padding-right + border-left + border-right 
Height height + padding-top + padding-bottom + border-top + border-bottom