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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。