CSS padding-bottom Property

Last Updated : 09 Aug, 2019

An element’s padding is the space between its content and its border. The padding-bottom CSS property is used to set the height of the padding area on the bottom of an element.

Syntax:

padding-bottom: length|percentage;

Property values:

length: This value is used to specify the size of padding as a fixed value. The default value is 0. It must be non-negative.

Syntax:

padding-bottom: length;

Example:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>CSS padding-bottom Property</title> 
        <style> 
            p.geek { 
            padding-bottom: 35px; 
            color: white; 
            background: green; 
            } 
        </style> 
    </head> 
      
    <body style = "text-align: center;"> 
          
        <h1 style = "color: green;">GeeksforGeeks</h1> 
          
        <h2>padding-bottom Property</h2> 
          
        <!-- Below paragraph element has a  
            padding-bottom of 35px -->
        <p class="geek"> 
            This paragraph has a padding-bottom: 35px; 
        </p> 
          
    </body> 
</html>                     

Output:
paddingbottom

percentage: This type of value is used to specify the bottom padding in percent of the width of the element. It must be non-negative.

Syntax:

padding-bottom: percentage;

Example:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>CSS padding-bottom Property</title> 
          
        <style> 
            p.geek { 
            padding-bottom: 10%; 
            color: white; 
            background: green; 
            } 
        </style> 
    </head> 
      
    <body style = "text-align: center;"> 
          
        <h1 style = "color: green;">GeeksforGeeks</h1> 
          
        <h2>padding-bottom Property</h2> 
          
        <!-- Below Paragraph element has a  
            padding-bottom of 10% -->
        <p class="geek"> 
            This paragraph has a padding-bottom: 10%; 
        </p> 
    </body> 
</html>                                         

Output:
paddingbottom

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

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

My Personal Notes

Related Articles