css+div中的padding问题！

Question

理论知识是一个盒子的大小是:content+padding+border+margin.

例如:

在一个div盒子中使用了background: url(cup.gif) no-repeat left bottom;
这样插入了一个图片，然后再使用padding:0 0 14px 0;图片像下移动了14像素。

请问这个时候padding的作用是移动图片位置的作用 还是在扩大一个盒子的大小范围？

Answer 1

padding并非定位图片用的,只是内边距属性,会撑大一个盒子,前提是此盒子的定宽小于其padding值;如一个div的高度是20px 那么你这个div的尺寸就不会受影响;如果是在js代码中写的话就可以加入判断,可以有严谨的布局效果

Answer 2

Padding属性定义元素边框与元素内容之间的空间。

padding 简写属性在一个声明中设置所有内边距属性。设置所有当前或者指定元素内边距属性。该属性可以有1到4个值。当元素的 Padding（填充）（内边距）被清除时，所"释放"的区域将会受到元素背景颜色的填充。单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变一切都改变。

　　语法结构

padding-top:20px;上内边距
 
padding-right:30px;右内边距

padding-bottom:30px;下内边距
 
padding-left:20px;左内边距
 
padding:1px四边统一内边距
 
padding:1px1px上下,左右内边距
 
padding:1px1px1px上,左右,下内边距
 
padding:1px1px1px1px上,右,下,左内边距

Answer 3

此时，你指定的padding值是给该盒子的下方padding一个14px的空间，而background是在padding上面的，由于你指定的background是left bottom，重点是bottom，导致你给盒子padding-bottom：14px；后，background自动向下移动了14px。你可以参考css2.0盒模型（看content、padding、border、margin的上下级关系）

Answer 4

背景图片不是单单铺在content里的，它是从padding就开始铺的，所以你设置了padding或者扩大了padding的值，看上去就像移动了背景图片的位置了