css标准盒模型

---

标准盒模型

点击查看怪异盒模型和弹性盒模型总结

标准盒模型盒子的实际大小

盒子的总宽度 = width  + 左右的padding + 左右的border
盒子的总高度 = height + 上下的padding + 上下的border

一、padding（内边距）

控制内容与盒子边框的关系（又叫内填充）
填充：padding,在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。 也称补白；

用法：

1）用来调整内容在容器中的位置关系 
2）padding值是额外加在元素原有大小之上的，加完会改变原元素的大小（对于标准盒模型而言）
   如想保证元素大小不变，需从元素宽或高上减掉添加的padding属性值

属性值的4种方式：

四个值：上 右 下 左 {