CSS中盒子模型的組成由內容區（content）、內邊距（padding）、邊框（border）、外邊距（margin）組成。內邊距可細分為 padding-top、padding-right、padding-bottom、padding-left；邊框可細分為 border-top、border-right、border-bottom、border-left；外邊距可細分為 margin-top、margin-right、margin-bottom、margin-left。
對於盒子模型，W3C標准和低版本IE瀏覽器是不一樣的，主要區別是內容部分的width和height的定義不同。我們常說的盒子模型一般指W3C標准的盒子模型。下面對此做一個區分：
如果一個元素各組成部分如下：
margin：10px； border：2px； padding：5px； width：200px；height：100px，那么：
1、W3C標准
內容部分的width就單單指width，height就單單指height
整個盒子模型的寬是： margin*2 + border*2 + padding*2 + width（嚴格來說是：margin-left + border-left + padding-left + width + padding-right + border-right + margin-right）
整個盒子模型的高是： margin*2 + border*2 + padding*2 + height（嚴格來說是：margin-left + border-left + padding-left + height + padding-right + border-right + margin-right）
如下圖
則整個盒子模型的寬是：10px*2 + 2px*2 + 5px*2 + 200px = 234px
則整個盒子模型的高是：10px*2 + 2px*2 + 5px*2 + 100px = 134px
2、低版本IE瀏覽器（主要是指IE5和（IE6的怪異模式），不過現在這兩個版本的瀏覽器的市場占有率已經很低了）的標准：
內容部分的width和height是把內邊距（padding）和邊框寬度（border）也算進去
整個盒子模型的寬是： margin*2 + width（嚴格來說是：margin-left + width + margin-right）
整個盒子模型的高是： margin*2 + height（嚴格來說是：margin-left + height + margin-right）
如下圖
則整個盒子模型的寬是：10px*2 + 200px = 220px
則整個盒子模型的高是：10px*2 + 100px = 120px
如下博文有對W3C標准有更詳細的說明：