亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

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>

運行程序嘗試一下




繼續(xù)學習
||
<!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>
提交重置代碼