BlogsDope image BlogsDope

CSS padding

March 21, 2021 CSS PADDING 461

Padding is the space between the content and border of an element. The padding property is a shorthand property that sets the values of the four padding properties - padding-top, padding-right, padding-bottom and padding-left in a single declaration.

CSS

padding: [padding-top] [padding-right] [padding-bottom] [padding-left];

The background color that you give to an element will be applied to the entire area (including padding) enclosed within the border.

Values

<length> : Specifies padding width in px, pt, em, rem, cm, etc. Default value is 0. Negative values are not allowed.

<percentage> : Specifies padding width as a percentage of the width of the containing block. Negative values are not allowed

initial : Sets the default value.

inherit : Inherits the value from parent element.

You can give four or less than four values to the padding property. The effect of each of these on padding is given below.

Giving four values

The first, second, third and forth values define the top, right, bottom and left padding respectively.

CSS

padding: 10px 20px 30px 40px;

For the above declaration

  • top padding is 10px
  • right padding is 20px
  • bottom padding is 30px
  • left padding is 40px

Giving three values

The first and third values define the top and bottom padding respectively. The second value defines the right and left padding.

CSS

padding: 10px 20px 40px;

For the above declaration

  • top padding is 10px
  • right and left padding are 20px
  • bottom padding is 40px

Giving two values

The first value defines the top and bottom padding. The second value defines the right and left padding.

CSS

padding: 10px 20px;

For the above declaration

  • top and bottom padding are 10px
  • right and left padding are 20px

Giving one value

It defines all the four padding widths.

CSS

padding: 20px;

For the above declaration

  • padding on all the four sides is 20px

In the following example, padding for all the four sides is defined in a single declaration.

See the Pen padding example by Aakhya Singh (@aakhya) on CodePen.

It's not necessary to give all the padding values in the same unit. For example, you can give one of the values in px and others in percentage as shown below.

See the Pen padding example by Aakhya Singh (@aakhya) on CodePen.

Browser Support

This property is supported in all the major browsers. Versions of IE for Windows upto 7 don't support the value inherit.


Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks
0 COMMENT

Please login to view or add comment(s).