CSS Padding(填充)
CSS?Padding(填充)
CSS Padding(填充)屬性定義元素邊框與元素內(nèi)容之間的空間。
Padding(填充)
當元素的 Padding(填充)(內(nèi)邊距)被清除時,所"釋放"的區(qū)域?qū)艿皆乇尘邦伾奶畛洹?/p>
單獨使用填充屬性可以改變上下左右的填充??s寫填充屬性也可以使用,一旦改變一切都改變。
Padding 屬性的值用 像素px,厘米 ,百分比%
CSS填充屬性
屬性 | 說明 |
---|---|
padding | 使用縮寫屬性設置在一個聲明中的所有填充屬性 |
padding-bottom | 設置元素的底部填充 |
padding-left | 設置元素的左部填充 |
padding-right | 設置元素的右部填充 |
padding-top | 設置元素的頂部填充 |
在CSS中,它可以指定不同的側(cè)面不同的填充:
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(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中文網(wǎng)(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中文網(wǎng)(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>
運行程序嘗試一下