CSS | padding-top Property

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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

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

    Syntax:

    padding-top: initial;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

  • inherit: It is used to inherit padding-top property from its parent element.

Supported Browsers: The browser supported by padding-top property are listed below:

  • Google Chrome 1.0
  • Internet Explorer 4.0
  • Firefox 1.0
  • Safari 1.0
  • Opera 3.5


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.