Skip to content
Related Articles

Related Articles

Improve Article

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>                     

    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
Recommended Articles
Page :