Welcome to the CSS tutorials, and today we will cover CSS padding shorthand property. Till now We have covered CSS padding left, CSS padding right, CSS padding top, and CSS padding bottom as well. But we have kept CSS padding shorthand property to the end, why? Because if we could have discussed the shorthand property earlier, then probably you would have not gone through the rest of the individual property.
The beauty of the CSS padding shorthand property is, you can set all the padding properties in one declaration. Yes, you can avoid writing a different line of codes for top, bottom, left or right. Since we want our reader’s to go through the basics to clear or handle any sort of code, whether using the shortcode properties or the individual properties.
CSS Padding Shorthand – Definition
The CSS padding shorthand property is a declaration of the multi line code into a single line. You can set paddings for:
- All equal sides.
- All different sides.
- Two sides.
- Three sides
Syntax
The syntax of the CSS padding shorthand is:
padding: fixed value;
Or
padding: inherit value;
Or
padding: percent value;
Note: The default value of the padding is Zero (0).
CSS Padding Shorthand – Values
You can use any of the below mentioned values:
- Default values – If you don’t want to change the values, then use the default one.
- Inherit values – If you want to use the parent padding, then use inherit.
- Length values – If you want to use the fixed values like, cm, pt, px or em, then you can use it.
- Percentage values – In case, you wish to use the percentage value, then better go for this option.
Can Read: What, why and how of the CSS cell padding?
CSS Padding Shorthand – Example
We will cover four declarations in one line using the padding shorthand.
- CSS padding left
- CSS padding right
- CSS padding top
- CSS padding bottom
Let’s see how we can do it with a simple example. In case, you want to check individual property with the example, then better click on it, and learn with ease.
Example – In this example, we will set the different values for all the sides using the CSS padding shorthand property. In the below example, we set the top padding = 15px, right padding=25px, bottom padding=35px and the last bottom padding =45px. When you will run this code, then let’s see what you will get.
<html>
<head>
<title> Learn CSS Padding</title>
<style type="text/css">
table.sharplesson_CSS td { padding: 15px 25px 35px 45px; }
</style>
</head>
<body>
<h2>CSS Shorthand padding </h2>
<table border="1" class="sharplesson_CSS">
<tr><td>Shorthand Padding 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:
We can clearly see that the output is as per the value set by us. We have taken one cell to show you how exactly the value has affected the border.
Dark red – It is showing the top padding.
Blue – It is showing the right padding.
Red – It is showing the bottom padding.
Dark blue – It is showing the left padding.
Note: If you want to set the equal value to all sides, then you can use padding: 25px; or a value. In case you want to set the value of two sides, then you can do like, padding: 25px, 35px; Here, the top and bottom will be set to 25px, and the left and right padding will be set to the 35px.
Conclusion
We have just covered the CSS padding shorthand property. You should know the individual declaration of the property, and hence we kept shorthand padding for the last moment. Now see, you can write code for any property. In case, you just jumped on to the CSS padding shorthand property tutorial, then we will suggest you to understand the meaning of the base. Strong base will create a foundation for you to go solid.