CSS padding-top用法及代碼示例

填充是其內容和邊框之間的空間。 CSS中的padding-top屬性用於設置元素頂部的填充區域的寬度。

用法:

padding-top:length|percentage|initial|inherit;

屬性值：

length:此模式用於將填充大小指定為固定值。大小可以設置為px，cm等形式。默認值為0。它必須為非負數。

用法:

padding-top:length;

例：

<!DOCTYPE html>  
<html>  
    <head>  
        <title>  
            padding-top Property  
        </title>  
          
        <style>  
            .geek {  
                padding-top:100px;  
                width:50%;  
                font-size:18px;  
                border:1px solid black; 
            }  
        </style>  
    </head>  
      
    <body>  
        <h2>  
            padding-top Property  
        </h2>  
          
        <!-- padding property used here -->
        <p class = "geek">  
            This paragraph has a padding-top:100px;  
        </p>  
    </body>  
</html>

輸出：

percentage:此模式用於以元素寬度的百分比設置頂部填充。它必須是非負的。

用法:

padding-top:percentage (%)

例：

<!DOCTYPE html>  
<html>  
    <head>  
        <title>  
            padding-top Property  
        </title>  
          
        <style>  
            .geek {  
                padding-top:10%;  
                width:50%;  
                font-size:18px;  
                border:1px solid black; 
            }  
        </style>  
    </head>  
      
    <body>  
        <h2>  
            padding-top Property  
        </h2>  
          
        <!-- padding property used here -->
        <p class = "geek">  
            This paragraph has a padding-top:10%;  
        </p>  
    </body>  
</html>

輸出：

initial:它用於將padding-top屬性設置為其默認值。

用法:

padding-top:initial;

例：

<!DOCTYPE html>  
<html>  
    <head>  
        <title>  
            padding-top Property  
        </title>  
          
        <style>  
            .geek {  
                padding-top:initial;  
                width:50%;  
                font-size:18px;  
                border:1px solid black; 
            }  
        </style>  
    </head>  
      
    <body>  
        <h2>  
            padding-top Property  
        </h2>  
          
        <!-- padding property used here -->
        <p class = "geek">  
            This paragraph has a padding-top:initial;  
        </p>  
    </body>  
</html>

輸出：

inherit:它用於從其父元素繼承padding-top屬性。

支持的瀏覽器：下麵列出了padding-top屬性支持的瀏覽器：

穀歌瀏覽器1.0
Internet Explorer 4.0
Firefox 1.0
Safari 1.0
Opera 3.5

相關用法

注：本文由純淨天空篩選整理自omprakash_op大神的英文原創作品 CSS | padding-top Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。