CSS Padding
CSS padding is a shorthand attribute that defines the space between the border of the element and the content of the element, that is, the upper, lower, left, and right inner margins.
Padding
When the padding of the element is cleared, the released area will be filled with the background color of the element.
The padding property alone can change the top, bottom, left, and right padding.
Possible Values
value | illustrate |
---|---|
length | Define a fixed padding (pixels, pt, em, etc.) |
% | Use a percentage value to define a fill |
Padding: Single Side Padding Properties
In CSS, it can specify different padding for different sides:
Example
padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px;
Description:
-
The top padding is 25px
-
The right inner margin is 50px
-
The bottom padding is 25px
-
The left inner margin is 50px
Padding: Shorthand Property
To shorten the code, it can specify all fill properties in one property.
This is the so-called shorthand property. The shorthand property is padding :
Example
padding:25px 50px;
The Padding property can have one to four values.
padding: 25px 50px 75px 100px;
-
Top padding is 25px
-
Right padding is 50px
-
The bottom padding is 75px
-
The left padding is 100px
padding: 25px 50px 75px;
-
Top padding is 25px
-
The left and right padding is 50px
-
The bottom padding is 75px
padding:25px 50px;
-
Fill up and down to 25px
-
The left and right padding is 50px
padding:25px;
-
All padding is 25px
More Examples
All padding properties in a declaration
This example demonstrates all padding properties set in a declaration using shorthand properties, which can have one to four values.
Set the left padding
This example demonstrates how to set the left padding of an element.
Set the right padding
This example demonstrates how to set the right padding of an element. .
Set the upper padding
This example demonstrates how to set the padding on the element.
Set the bottom fill
This example demonstrates how to set the bottom fill of an element.
CSS Padding Properties
Property | Description |
---|---|
padding | Use shorthand attributes to set all fill attributes in one declaration |
padding-bottom | Set the bottom padding of the element |
padding-left | Set the left padding of the element |
padding-right | Set the right padding of the element |
padding-top | Set the top padding of the element |