CSS | padding-top Property

Last Updated : 10 Jan, 2019

Padding is the space between its content and border. The padding-top property in CSS is used to set the width of the padding area on the top of an element.

Syntax:

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

Property Values:

length: This mode is used to specify the size of padding as a fixed value. The size can be set in form of px, cm etc. The default value is 0. It must be non-negative.

Syntax:

padding-top: length;

Example:

<!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>                     

Output:

percentage: This mode is used to set the top padding in percentage of the width of the element. It must be non-negative.

Syntax:

padding-top: percentage (%)

Example:

<!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>                     

Output:

initial: It is used to set padding-top property to its default value.

Syntax:

padding-top: initial;

Example:

<!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>                     