盒模型结构解析

在我们的网页设计中，常会听到这样一些名词概念：内容（content）、填充（补白、内边距、padding）、边框（border）、边界（外边距、margin）。日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以把这些名词盒模型概念。它具有如下特性：
每个盒子都有：margin、padding、content、border4个属性。
每个属性都包括4个部分：上、右、下、左。属性4的个部分可同时设置，也可分别设置。

1、margin控制当前元素与其他同级元素的位置关系，不会改变盒子内部的大小。
如下代码实现box1和box2之间的间距：

2、padding是长在盒子内部的，添加在父元素上面，可以把盒子撑大，控制子元素在盒子内部的位置关系。

3、元素实际宽高计算
元素的宽度width=内容宽(content)+内边距(padding)x2+边框宽(border)x2
元素的高度height=内容高(content)+内边距(padding)x2+边框高(border)x2
如下是box3元素实际宽高描述：

实际宽度width=300+20x2+5x2=350px
实际高度height=200+20x2+5x2=250px