CSS的W3C标准的盒子模型和低版本IE浏览器的盒子模型
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标准有更详细的说明：
