html中的盒子模型深层次的讲解

1、对合子模型有一个初步的观察

2、从最初的一个div及css样式讲起

<div style="width:200px; height:200px; border:5px red solid; margin:0 auto;">

我爱你百度经验

</div>

效果如下所示

3、padding的值类型为一个的效果（上下左右分别为10px）和对元素的一个影响（margin的值也是这样影响的）

<div style="width:200px; height:200px; border:5px red solid; margin:0 auto; padding:10px">

我爱你百度经验

</div>

4、padding的值类型为二个的效果（上下分别为10px，左右分别为10px）和对元素的一个影响（margin的值也是这样影响的）

<div style="width:200px; height:200px; border:5px red solid; margin:0 auto; padding:10px 20px;">

我爱你百度经验

</div>

5、padding的值类型为二个的效果（上为10px，左右分别为20px，下为30px）和对元素的一个影响（margin的值也是这样影响的）

<div style="width:200px; height:200px; border:5px red solid; margin:0 auto; padding:10px 20px 30px;">

我爱你百度经验

</div>

6、padding的值类型为二个的效果（从上、右、下、左顺时针方向分别为10px，20px，30px，40px）和对元素的一个影响（margin的值也是这样影响的）

<div style="width:200px; height:200px; border:5px red solid; margin:0 auto; padding:10px 20px 30px 40px;">

我爱你百度经验

</div>