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 Values

Padding: Single Side Padding Properties

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

Example

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

Description:

• The top padding is 25px

• The right inner margin is 50px

• The bottom padding is 25px

• The left inner margin is 50px

Padding: Shorthand Property

To shorten the code, it can specify all fill properties in one property.

This is the so-called shorthand property. The shorthand property is padding :

Example

padding:25px 50px;

 Try It! 

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 a 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.

CSS Padding Properties