CSS Padding(填充)
CSS Padding(填充)属性定义元素边框与元素内容之间的空间。
Padding(填充)
当元素的 Padding(填充)(内边距)被清除时,所"释放"的区域将会受到元素背景颜色的填充。
单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用,一旦改变一切都改变。
Padding 属性的值用 像素px,厘米 ,百分比%
CSS填充属性
属性 | 说明 |
---|---|
padding | 使用缩写属性设置在一个声明中的所有填充属性 |
padding-bottom | 设置元素的底部填充 |
padding-left | 设置元素的左部填充 |
padding-right | 设置元素的右部填充 |
padding-top | 设置元素的顶部填充 |
在CSS中,它可以指定不同的侧面不同的填充:
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> p { background-color:yellow; } p.padding { padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px; } </style> </head> <body> <p>这是一段没有指定填充。</p> <p class="padding">这一段指定l填充。</p> </body> </html>
运行程序尝试一下
填充 - 简写属性
为了缩短代码,它可以在一个属性中指定的所有填充属性。
这就是所谓的缩写属性。所有的填充属性的缩写属性是"padding":
Padding属性,可以有一到四个值。
padding:25px 50px 75px 100px;
上填充为25px
右填充为50px
下填充为75px
左填充为100px
padding:25px 50px 75px;
上填充为25px
左右填充为50px
下填充为75px
padding:25px 50px;
上下填充为25px
左右填充为50px
padding:25px;
所有的填充都是25px
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> p { background-color:yellow; } p.padding { padding:25px 50px; } </style> </head> <body> <p>这是一段没有指定填充。</p> <p class="padding">这一段指定l填充。</p> </body> </html>
运行程序尝试一下
实例
演示了使用缩写属性设置在一个声明中的所有填充属性,可以有一到四个值。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> p.ex1 {padding:2cm;} p.ex2 {padding:0.5cm 3cm;} </style> </head> <body> <p class="ex1">这个文本填充两边相等。填充每边2厘米。</p> <p class="ex2">这个文本填充两边相等。填充每边2厘米。</p> </body> </html>
运行程序尝试一下