CSS padding Property

Padding is the space between the content and the border of an element.

The padding property add spacing inside the element.

This property accepts any length value, such as, px, %, em, and others.

Example

#

An element with a 40-pixel padding on all 4 sides.

40px padding on all sides
<style>
  .padding {
    background-color: aliceblue;
    border: 1px solid lightblue;
    padding: 40px;
  }
</style>

<div class="padding">
  40px padding on all sides
</div>

Using padding

The padding property specifies the spacing for 4 sides of an element.

Padding is spacing added inside the element, between the content and border.

This property is a shorthand for these four side-specific padding properties:

Here is an example: padding: 20px 10px 12px 25px;

These represent the top, right, bottom, and left values -- in that order.

Compact Syntax

padding: length | initial | inherit;

Values

#

Value Description
length Default is 0. The padding for all 4 sides. Negative values not allowed.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

Quick Example:   padding: 35px;


Expanded Syntax

padding: top right bottom left;

Values

#

Value Description
top Default is 0. Top padding value specified as a length or % CSS value.
right Default is 0. Right padding value specified as a length or % CSS value.
bottom Default is 0. Bottom padding value specified as a length or % CSS value.
left Default is 0. Left padding value specified as a length or % CSS value.

Quick Example:   padding: 35px 0 20px 5px;


More Examples

Click the buttons to see the different padding values.

An element with 5% padding
<style>
  .padding-examples {
    padding: 5%;
    border: 2px solid steelblue;
  }
</style>

<div class="padding-examples">
  An element with 5% padding
</div>

Click the buttons to see the different padding values.

An element with 80px, 40px, 60px, 20px padding
<style>
  .padding-example {
    padding: 80px 40px 60px 20px;
    max-width: 450px;
    border: 2px solid steelblue;
  }
</style>

<div class="padding-example">
  An element with 80px, 40px, 60px, 20px padding
</div>

Code Explanation

The padding values are in this order: top, right, bottom, and left.

When three values are specified it sets top, right, and bottom. Left is the same as right.

With two values, the first value sets top and bottom, and the second sets left and right.

With one value, all sides of the element use the specified padding.


Did you know?

Did you know?

Margin versus padding

Both properties add spacing to the elements.

The padding property adds space to the inside of the element.

The margin property adds space to the outside of the element.

This difference greatly affects click regions, background colors, and other behaviors.


Browser support

This table shows when padding support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
4.0 Sep 1997
Opera
3.5 Nov 1998
Safari
1.0 Jun 2003

You may also like

Guides