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