CSS padding-right用法及代碼示例

填充是其內容與其邊界之間的空間。 CSS中的padding-right屬性用於設置元素右側的填充區域的寬度。

用法:

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

屬性值：

length:此模式用於將填充大小指定為固定值。默認值為0。它必須為非負數。

用法:

padding-right:length;

例：

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            padding-right Property 
        </title> 
          
        <style> 
            .geek { 
                padding-right:200px; 
                color:white; 
                background:green; 
                width:50%; 
                font-size:18px; 
            } 
        </style> 
    </head> 
      
    <body style = "text-align:center"> 
        <h1 style = "color:green;"> 
            GeeksforGeeks 
        </h1> 
          
        <h2> 
            padding-right Property 
        </h2> 
          
        <!-- padding property used here -->
        <p class = "geek"> 
            This paragraph has a padding-right:200px; 
        </p> 
    </body> 
</html>

輸出：
paddingright

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

用法:

padding-right:percentage;

例：

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            padding-right Property 
        </title> 
        <style> 
            .geek { 
                padding-right:40%; 
                color:white; 
                background:green; 
                width:50%; 
                font-size:18px; 
            } 
        </style> 
    </head> 
      
    <body style = "text-align:center"> 
        <h1 style = "color:green;"> 
            GeeksforGeeks 
        </h1> 
        <h2> 
            padding-right Property 
        </h2> 
      
            <!-- padding property used here -->
        <p class = "geek"> 
            This paragraph has a padding-right:40%; 
        </p> 
    </body> 
</html>

輸出：
paddingright

initial:此屬性用於設置默認值。

用法:

padding-right:initial;

例：

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            padding-right Property 
        </title> 
          
        <style> 
            .geek { 
                padding-right:initial; 
                color:white; 
                background:green; 
                width:70%; 
                font-size:25px; 
            } 
        </style> 
    </head> 
      
    <body style = "text-align:center"> 
        <h1 style = "color:green;"> 
            GeeksforGeeks 
        </h1> 
          
        <h2> 
            padding-right Property 
        </h2> 
          
        <!-- padding property used here -->
        <p class = "geek"> 
            This paragraph has a padding-right:initial; 
        </p> 
    </body> 
</html>

輸出：

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

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

相關用法

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