CSS padding-bottom

The CSS padding-bottom property is used to create bottom padding for specified elements. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      .myd{border: 2px solid coral; padding-bottom: 32px;}
   </style>
</head>
<body>
   
   <div class="myd">
      This is an example of padding-bottom property in CSS.
   </div>
   
</body>
</html>
Output
This is an example of padding-bottom property in CSS.

In the above example, the CSS rules set a 2-pixel wide solid border around the element with a color of coral, and a padding of 32 pixels on the bottom side of the element.

In the HTML body, there is a single <div> element with a class of "myd". The content within the div will be affected by the CSS styling rules set for this class.

Specifically, the element with the class "myd" will have a 2-pixel wide border around its edges with a coral color. The padding-bottom property of 32 pixels will add extra space between the content of the <div> element and the bottom border, effectively pushing the content away from the bottom of the element.

Therefore, in this example, the text "This is an example of padding-bottom property in CSS." will appear inside the <div> element with the applied styling rules of the "myd" class. The text will be pushed away from the bottom border of the element by 32 pixels due to the padding-bottom property.

Note: Bottom padding is the width (height) of the area below the content and before the border of the specified element.

CSS padding-bottom syntax

The syntax of the padding-bottom property in CSS is:

padding-bottom: x;

The value of x should be any of the following:

Note: To learn about padding in detail, refer to its separate tutorial.

Advantages of the padding-bottom property in CSS

Disadvantages of the padding-bottom property in CSS

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!