CSS内边距使用记录

2/10/2017来源:心得技巧人气:3109

默认情况下,在每个块中内容的内边距都是为 0 的,我们可以通过 padding 属性为其设置内边距。

属性值为 数字 加 单位像素(px)

padding-top 代表距上内边距,我们为其设置值之后,块中的内容距离上边框的距离就等于 padding-top 的属性值。

padding-right 代表距右内边距,为其设置值之后,块中的内容距离右边框的距离就等于 padding-right 的属性值。

padding-bottom 代表距下内边距,为其设置值之后,块中的内容距离下边框的距离就等于 padding-bottom 的属性值。

padding-left 代表距左内边距,为其设置值之后,块中的内容距离左边框的距离就等于 padding-left 的属性值。

直接使用 padding 也可以设置内边框,有多种取值方式。

利用四个属性值的表示方法,代表着按照顺时针方向设置四个方向的内边距,即第一个代表距上边内边距,第二个代表距右边内边距,第三个代表距下边内边距,第四即距左边内边距。格式为 padding:top right bottom left;

利用三个属性值的表示方法,代表着按照顺时针方向设置三个方向的内边距,跟四个属性值时前三个的表示相同,第四个(即距左边内边距)省略掉,这个时候距左边内边距的属性值将等于距离右边内边距的属性值。格式为 padding:top right bottom;

利用两个属性值的表示方法,第一个属性值代表着距上边的内边距,第二个属性值带摆着距右边的内边距。这里的距下内边距和距左内边距都有对应的属性值,距下边内边距的属性值等于距上边内边距,距左内边距的属性值等于距右内边距的属性值。格式为 padding:top right;

直接利用单个属性值的表示方法,代表着四个方向的内边距都相同。

如果块中的空间已被内容填满,添加内边距将会撑大块的体积,为块添加背景颜色时,内边距撑开的地方也将会被添加上背景颜色。