Skip to content
Related Articles

Related Articles

CSS | padding-top Property

View Discussion
Improve Article
Save Article
  • Last Updated : 04 Aug, 2022
View Discussion
Improve Article
Save Article

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: 

html




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

html




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

html




<!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
  • Edge 12.0
  • Internet Explorer 4.0
  • Firefox 1.0
  • Safari 1.0
  • Opera 3.5

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!