Posts in current category

CSS Padding (fill)


May 03, 2021 22:00 CSS


Table of contents


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

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 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:

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>


Try it out . . .
Click the "Try it" button to view the online instance

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:

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

Try it out . . .

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:25px 50px;

Try it out . . .

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

CSS Padding (fill)

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

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