The CSS padding properties are effectively used to create space around an element's content within defined borders.
Margin vs Padding
Margins play a crucial role in defining the spacing outside an element, effectively determining its relationship with neighboring elements, whereas padding is responsible for managing the internal space within an element, ensuring proper alignment and separation of content.
CSS Padding properties
An HTML element has four sides, so we have four padding properties for each side.
- padding-top
- padding-bottom
- padding-left
- padding-right
Playground Example: To make things simpler, you can click the button below to open the playground, which comes with pre-filled HTML and CSS.
In the editor, you will see HTML, CSS, and JS input on the left/top, and the output on the right/bottom.
Below is the syntax for adding padding:
Selector {
padding-top: value;
padding-bottom: value;
padding-left: value;
padding-right: value;
}- The selector can be any one or more of those discussed previously in CSS Selectors.
- " padding-*" is the property key
- "value" can be in pixels, percentage, auto or inherit.
Example:
/* padding-top */
.paddingTop {
padding-top: 10px;
}Try changing the value in the playground and observe the padding change.
It is not required to add all four padding properties; we can add them based on what is required.
CSS Padding Shorthand
The shorthand property is used to specify all padding properties in a single declaration.
Below is the syntax for adding padding shorthand:
Selector {
padding: padding-top padding-right padding-bottom padding-left
}The selector can be any one or more of those discussed previously in CSS Selectors.
"padding" is the property key
"value" can be a mix of all possible values. Keep in mind that the order of values matter.
Example:
/* padding-shorthand */
.shortHandStyle {
padding: 10px 20px 10px 20px;
}Note: Shorthands are very common in CSS, and we will encounter them more often as we move forward.
CSS Padding Shorthand - Variations
The padding shorthand property can have different variations.
Here are the various syntax variations for padding shorthand.
When left and right padding is equal
/* When left and right are equal */
Selector {
padding: padding-top padding-right padding-bottom
}
Example:
/* padding-shorthand Three Value */
.shortHandThreeValue {
padding: 10px 20px 10px;
}When left and right padding are equal and top and bottom are equal
/* When left = right and top = bottom */
Selector {
padding: padding-top padding-right
}Example:
/* padding-shorthand Two Value */
.shortHandTwoValue {
padding: 10px 20px;
}When all padding are equal
/* When left = right = top = bottom */
Selector {
padding: padding-top
}Example:
/* padding-shorthand Single Value */
.shortHandSingleValue {
padding: 10px;
}It will also be a good time to review the previous article, "How to Add CSS in HTML."
Want to practice more? Click here for more hands-on exercise.
References: