CSS padding-bottom tutorial

CSS padding-bottom

The CSS padding-bottom property specifies the bottom padding of an element. It adds space between the content of the element and its bottom border.

Let's see an example to understand how padding-bottom works:

Result:
This is an example text with padding at the bottom.

In the example above, the padding-bottom: 20px; creates a bottom padding of 20 pixels for the <div> element, pushing the content away from the bottom border by 20 pixels.

Here is an example code snippet to apply padding-bottom to a <div> element:


<div style="padding-bottom: 20px; border: 1px solid black;">
  This is an example text with padding at the bottom.
</div>

Now, let's create a table to demonstrate the use of padding-bottom with larger content:

Name Age
John Doe 30
Jane Smith 25

In the table above, the padding-bottom property can be applied to the cells to create space between the content and the bottom border of each cell.

That's it! You should now have a good understanding of how to use padding-bottom in CSS to add bottom padding to elements.