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 value

value Description
length Define a fixed padding (pixels, pt, em, etc.)
% Use a percentage value to define a fill

Padding-single side padding property

In CSS, it can specify different padding on different sides:

Example

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
  • The top padding is 25px
  • The right inner margin is 50px
  • The bottom padding is 25px
  • The left inner margin is 50px

Fill-shorthand attribute

To shorten the code, it can specify all fill attributes in one attribute.

This is the so-called shorthand attribute. The shorthand attribute for all padding attributes 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 one 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.

All CSS fill properties

Attributes 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