Welcome to the CSS tutorial, and today we will see what is CSS padding bottom? Before that we have covered CSS padding, and if you missed it, then why don’t you give a few minutes to understand the starting point of the padding, and then move gradually? Well anyways, it’s a suggestion, and you want to stick with CSS padding bottom first, then most welcome to the Sharplesson’s CSS tutorial.
CSS Padding Bottom – Definition
The CSS padding bottom property will set the bottom space around the element. You cannot use negative values, because it is not allowed or can say it is invalid to use.
Note: The default value of the padding bottom is ‘0’.
Syntax
The syntax of the padding bottom is very simple to remember:
padding-bottom: length;
or
padding-bottom: Global values (inherit/initial);
Tips
- No negative values, please.
- You can assign values in percentage or as a fixed value.
CSS Padding Bottom – Values
- Fixed values – you can use any positive value, like points, pixel or centimeters.
- Percentage value – You can put values in the percentage as well, like 50%, and 70% etc.
- Inherit value – You can use this value to inherit the padding-bottom value from its parent element.
Can Read: Learn the importance of the CSS cell padding.
CSS Padding Bottom – Examples
We will see examples of both values to clear any sort of doubt in your mind.
Example 1 – Using the fixed value.
Now let’s see the use of the padding-bottom in the real world example. We have set the value of the padding-bottom to 135px, and we deliberately set the value to 135px. The reason behind it is, you can figure out the different properties of the CSS padding with ease.
<html>
<head>
<title> Learn CSS Padding</title>
<style type="text/css">
table.sharplesson_CSS td { padding-bottom:135px; }
</style>
</head>
<body>
<h2>padding Bottom</h2>
<table border="1" class="sharplesson_CSS">
<tr><td>CSS Padding Bottom A</td><td>CSS Padding Bottom B</td></tr>
<tr><td>CSS Padding Bottom C</td><td>CSS Padding Bottom D</td></tr>
</table>
</body>
</html>
The output will be:
When you will run the above code, then you will see that we have shaded an area with the blue color, and that area we have created using CSS padding bottom. In fact, it will apply to the whole table, but explains the area, we have shown one example with shade.
Example 2 – Using the percentage value.
In this example, we have just changed the fixed value with the percentage value. Now the difference between the content’s element and the wall will vary in percentage.
<html>
<head>
<title> Learn CSS Padding</title>
<style type="text/css">
table.sharplesson_CSS td { padding-bottom: 10%; }
</style>
</head>
<body>
<h2>padding Bottom</h2>
<table border="1" class="sharplesson_CSS">
<tr><td>Padding Bottom A</td><td>Padding Bottom B</td></tr>
<tr><td>Padding Bottom C</td><td>Padding Bottom D</td></tr>
</table>
</body>
</html>
The output will be:
When you will run the code, you will get to see the above result. Nothing has changed, we have just used the different value in the property. Likewise, you can use inherit values as well.
CSS Padding bottom – BROWSER COMPATIBILITY
Now let’s check the browser which will support the CSS padding bottom property.
- Chrome
- Android
- Firefox (Gecko)
- Internet Explorer (IE)
- IE Phone
- Opera
- Safari (WebKit)
Conclusion
We have just covered CSS padding bottom, and its example. You can use padding to create eligible gaps between the cells or between the element’s content or the border of the element.