CSS Padding
This padding property is used to define the space between the element's content and its border.
It differs from the CSS margin property, which defines the space around elements. CSS padding is affected by background colors and creates an area around the content.
We can independently control the top, bottom, left, and right padding properties. We can also change all properties at once using the shorthand padding property.
|
Property |
Description |
|
padding |
It is used to set all the padding properties in one declaration. |
|
padding-left |
It is used to set left padding of an element. |
|
padding-right |
It is used to set the right padding of an element. |
|
padding-top |
It is used to set the top padding of an element. |
|
padding-bottom |
It is used to set the bottom padding of an element. |
Input:-
Output:-
|
Value |
Value |
|
length |
It is used to define fixed padding in pt, px, em, etc. |
|
% |
It defines padding in % of containing elements. |
The Padding Shorthand Property
The padding property is a shorthand property to avoid setting padding of each side separately, i.e., padding-top, padding-right, padding-bottom, and padding-left.
This shorthand notation can take one, two, three, or four whitespace-separated values.
- If one value is specified, it is applied to all four sides.
- If two values are specified, the first value is applied to the top and bottom sides, and the second value is applied to the right and left sides of the element's box.
- If three values are specified, the first value is applied to the top, the second value is applied to the right and left sides, and the last value is applied to the bottom.
- If four values are specified, they are applied to the top, right, bottom, and left side of the element's box respectively in the specified order.
Input:-
Output:-
