CSS padding 属性
CSS padding 属性
CSS padding 属性用于设置元素的内边距,将内容与边框之间的距离进行调整。padding 属性同时也可以用于添加背景颜色或背景图片到元素内部的空间。
语法
padding 属性的语法如下:
padding: top right bottom left;
或者
padding-top: value;
padding-right: value;
padding-bottom: value;
padding-left: value;
以上两种写法都可以,其中:
top
:元素顶部内边距的值。right
:元素右侧内边距的值。bottom
:元素底部内边距的值。left
:元素左侧内边距的值。value
:内边距的数值,可以是百分比、像素或其他支持的 CSS 单位。
值
padding 属性可以使用的值包括:
inherit
:继承父元素的内边距值。<number>
:在元素上使用固定的数字值展示内边距。例如,padding: 10px
。<length>
:使用特定的 CSS 长度单位来表示内边距值。例如,padding: 2em
。<percentage>
:使用一个百分比值来表示元素的宽度。例如,padding: 5%
。
属性值的顺序
在 padding
值中,我们可以按照顺序指定 1 至 4 个数字,每个数字后面紧跟一个单位,通常为 px,其它单位也可以。其数值分别对应于上、右、下、左的内边距的值,如:
padding: 10px 20px 30px 40px;
这个声明把顶部内边距设置为 10px,右侧内边距设置为 20px,底部内边距设置为 30px,左侧内边距设置为 40px。
如果没有指定左右内边距值,则第二个值为右边距与左边距合并的值,如:
padding: 10px 20px;
这个声明把顶部内边距设置为 10px,底部内边距设置为 10px,左右内边距合并设置为 20px。
如果只有一个值,表示所有方向的内边距都相等,如:
padding: 10px;
实例
以下是 padding 属性的一些实例:
实例 1:
在样式中添加 padding 模板:
div{
padding: 25px;
}
这个样式声明将会在内部四周添加一个 25 像素的内边距。
实例 2:
在样式中添加不同方向的内边距:
div {
padding-top: 5px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 20px;
}
这个样式声明将会在上部添加 5 像素,右边添加 15 像素,底部添加 10 像素,左边添加 20 像素内边距。
结论
padding 属性用于控制元素内部内容与边框之间的距离。你可以设置任何数量的内边距值,但是通常我们只设置 1 - 4 个来保持代码的简洁性。