Open In App

CSS padding-bottom Property

Improve
Improve
Like Article
Like
Save
Share
Report

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. 
  • 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. 

Example 1: In this example, we are using padding-bottom: length; property.

html




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

Example 2: In this example, we are using padding-bottom: percentage; property.

html




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


Last Updated : 13 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads