CSS Padding (fill)

CSS Padding (filled).

The CSS Padding property defines the space between the element's border and the element's content.

Padding (filling)

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.

Possible values

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 margin

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:

Assuming that the parent element of a paragraph is a div element, its padding width calculation is based on 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.

Fill - One-side margin properties

In CSS, it can specify different sides of different fills:

Fill - Short-case properties

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;

• The upper fill is 25px
• The right fill is 50px
• Is filled with 75px
• The left fill is 100px

padding:25px 50px 75px;

• The upper fill is 25px
• The left and right fills are 50px
• Is filled with 75px

padding:25px 50px;

• Fill up and down at 25px
• The left and right fills are 50px

padding:25px;

• All fills are 25px

More instances

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.

All CSS fill properties