May 03, 2021 CSS
4. The percentage value of the margin
5. Fill - One-side margin properties
The CSS Padding property defines the space between the element's border and the element's content.
When an element's Padding (padding) (inner margin) is cleared, the "released" area is filled with the element's background color.
Using the fill properties alone can change the fill up, down, left, and right. Abbreviated fill properties can also be used once everything changes.
Value | Description |
---|---|
length | Define a fixed fill (pixels, pt, em, etc.) |
% | Define a fill with a percentage value |
Tip: The CSS padding property can use length or percentage values, but unlike the margin property, it does not allow negative values.
The percentage value of the CSS padding property is calculated relative to the width of its parent element, and if the width of the parent element is changed, they also change.
Here's an example of setting the paragraph's margin to 20% of the parent element width:
p {padding: 20%;}
Assuming that the parent element of a paragraph is a div element, its padding width calculation is based on div:
<div style="width: 200px;">
<p>这个段落包含在一个宽度为200像素的DIV中。</p>
</div>
Note: The upper and lower margins are consistent with the left and right margins, i.e. the percentage of the upper and lower margins is set relative to the width of the parent element, not to the height.
In CSS, it can specify different sides of different fills:
To shorten the code, it can specify all fill properties in one property.
This is called abbreviated properties. The abbreviated property for all populated properties is "padding":
Padding property, which can have one or four values.
padding:25px 50px 75px 100px;
padding:25px 50px 75px;
padding:25px 50px;
padding:25px;
All fill properties in a declaration
This example demonstrates that you can have one to four values for all populated properties that are set in a declaration using abbreviated properties.
Set the left fill
This example shows how to set the element left fill.
Set the right-hand fill
This example shows how to set the element right fill.
Set the upper fill
This example shows how to set up padding on an element.
Set the lower fill
This example shows how to set up under-element padding.
Property | Description |
---|---|
padding | Use abbreviated properties to set all populated properties in a declaration |
padding-bottom | Set the bottom fill of the element |
padding-left | Set the left fill of the element |
padding-right | Set the right-hand fill of the element |
padding-top | Set the top fill of the element |