Article directory
CSS padding
The Padding property in CSS defines the space between an element's border and its content. The top, bottom, left and right padding can be changed at once by using the padding properties alone or using the abbreviated padding properties.
For example, if you wanted an element's padding to increase by 10 pixels in all four directions, you could set it like this:
padding: 10px;
If you only want to change the padding in a certain direction, you can use the following four separate properties:
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
After setting it in the above way, the padding in the top, right, bottom and left directions of the element will be increased by 10, 20, 30 and 40 pixels respectively.
Padding - single-sided padding properties
In CSS, the padding-one-sided padding property is used to specify the padding in one direction of an element. Specifically, it includes four attributes padding-top, padding-right, padding-bottomand padding-left, which correspond to the padding in the top, right, bottom, and left directions of the element respectively.
For example, if you want the top padding of an element to be 10 pixels, the right padding to be 20 pixels, the bottom padding to be 30 pixels, and the left padding to be 40 pixels, you can set it like this:
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
In addition, to simplify the code, you can also use paddingproperties to set the padding in all directions at once. For example:
padding: 10px 20px 30px 40px;
The above code has the same effect as the previous setup, but can be done with just one line of code. Among them, the first value corresponds to the top padding, the second value corresponds to the right padding, the third value corresponds to the bottom padding, and the fourth value corresponds to the left padding.
padding - shorthand attribute
The Padding property in CSS is a shorthand property used to set the width of all padding of an element. You can use 1 to 4 values to set the top, bottom, left and right padding.
When there is only one value, it will be applied to all four margins. For example: padding: 25px;the padding in the top, bottom, left, and right directions of the element will be 25 pixels.
When there are two values, the first value applies to the top and bottom margins, and the second value applies to the left and right margins. For example: padding: 10px 20px;the element's top and bottom padding will be 10 pixels, and its left and right padding will be 20 pixels.
When there are three values, the first value applies to the top margin, the second value applies to the left and right margins, and the third value applies to the bottom margin. For example: padding: 10px 20px 30px;this will make the top padding of the element 10 pixels, the left and right padding 20 pixels, and the bottom padding 30 pixels.
When there are four values, they apply to the top, right, bottom, and left margins, counting clockwise. For example: padding: 10px 20px 30px 40px;this will make the element's top padding 10 pixels, right padding 20 pixels, bottom padding 30 pixels, and left padding 40 pixels.
The above is the basic method of using the fill abbreviation attribute. You can set the fill in each direction according to specific needs.
Example
1. All padding properties in one declaration
Here is a CSS padding example showing how to set all padding properties in one statement:
padding: 10px 8px 10px 9px;
In this example, four padding values are set: top, right, bottom, and left. These values apply to the space between the top, right, bottom, and left sides of the element and its border. Specifically, this example means:
- Top padding is 10 pixels
- Right padding is 8 pixels
- Bottom padding is 10 pixels
- Left padding is 9 pixels
It is important to note that when a value is omitted in a declaration, it will be taken from its opposite direction (e.g. if upper padding is not declared, then lower padding will be applied to upper). Therefore, the following statement will have the same effect as the above example:
padding: 10px 8px;
In this statement, the top padding is 10 pixels and the right padding is 8 pixels. Since the values for bottom and left are not declared, they will get their values from opposite directions, i.e. 10 pixels for the bottom padding (taken from the top padding) and 8 pixels for the left padding (taken from the right padding).
2. Set left padding
Here is a CSS padding example showing how to set left padding:
padding-left: 20px;
In this example, padding-leftthe attribute is used to set the padding width of the left edge of the element to 20 pixels. This will leave a 20 pixel space between the element's content and its left edge. You can adjust this value as needed to change the size of the left padding.
3. Set the right padding
In CSS, you can use padding-rightproperties to set the padding width of the right edge of an element. For example, if you want the right padding of an element to be 15 pixels, you can set it like this:
padding-right: 15px;
This way, there will be a 15-pixel space between the element's content and its right edge. You can adjust this value as needed to change the size of the right padding.
4. Set the upper padding
In CSS, you can use padding-topproperties to set the padding width of an element's top edge. For example, if you want the top padding of an element to be 10 pixels, you can set it like this:
padding-top: 10px;
This way, there will be a 10-pixel space between the element's content and its top edge. You can adjust this value as needed to change the size of the upper padding.
5. Set the lower padding
In CSS, you can use padding-bottomproperties to set the padding width of the bottom edge of an element. For example, if you want the bottom padding of an element to be 5 pixels, you can set it like this:
padding-bottom: 5px;
This way, there will be a 5-pixel space between the element's content and the bottom edge. You can adjust this value as needed to change the size of the lower padding.
CSS padding properties
| Attributes | illustrate |
|---|---|
| padding-top | Sets the padding on the top edge of an element |
| padding-right | Sets the padding on the right edge of an element |
| padding-bottom | Sets the padding on the bottom edge of an element |
| padding-left | Sets the padding on the left edge of an element |
| padding | Simultaneously set the padding in the four directions of up, down, left and right, which can correspond to the four directions of top, right, bottom and left in turn. |