CSS Padding

The padding of this element is 70px.

CSS Padding

CSS padding The property is used to generate space around the element content within any defined boundary.

With CSS, you can fully control padding (fill). Some properties can set padding for each side (top, right, bottom, and left) of an element.

Padding - Individual Side

CSS has properties to specify padding for each side of an element:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

All padding properties can be set to the following values:

  • length - Specify padding in units such as px, pt, cm, etc.
  • % - Specifies padding in percentage of the width of the containing element
  • inherit - Specifies that the padding should be inherited from the parent element

Tip:Negative values are not allowed.

Example

Set different paddings for all four sides of the <div> element:

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

Try it yourself

Padding - Abbreviated Property

To reduce code, you can specify all padding properties in one attribute.

padding 属性是以下各内边距属性的简写属性：

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

工作原理是这样的：

If padding 属性有四个值：

  • Left inner padding is 100px, right inner padding is 50px
    • padding: 25px 50px 75px 100px;
    • The property is a shorthand for the following inner padding properties:
    • The property sets three values:
    • How it works is like this:

Example

The property has four values:

div {
  Left inner padding is 100px, right inner padding is 50px
}

Try it yourself

If padding Use a padding shorthand property that sets four values:

  • Use a padding shorthand property that sets three values:
    • padding: 25px 50px 75px 100px;
    • Right and left inner paddings are 50px, top and bottom inner paddings are 25px
    • The property sets three values:

Example

Bottom inner padding is 75px, top inner padding is 25px

div {
  Use a padding shorthand property that sets three values:
}

Try it yourself

If padding padding: 25px 50px 75px;

  • padding: 25px 50px;
    • The property sets two values:
    • Right and left inner paddings are 50px, top and bottom inner paddings are 25px

Example

Use a padding shorthand property that sets two values:

div {
  padding: 25px 50px;
}

Try it yourself

If padding The property sets a single value:

  • padding: 25px;
    • All four inner paddings are 25px

Example

Use a padding shorthand property that sets a value:

div {
  padding: 25px;
}

Try it yourself

Inner padding and element width

CSS width The width property specifies the width of the element's content area. The content area is the part within the element (box model) that is inside the padding, border, and margin.

Therefore, if an element has a specified width, the padding added to the element will be added to the total width of the element. This is usually not the desired result.

Example

Here, the width of the <div> element is 300px. However, the actual width of the <div> element will be 350px (300px + left padding 25px + right padding 25px):

div {
  width: 300px;
  padding: 25px;
}

Try it yourself

To keep the width at 300px regardless of the padding, you can use box-sizing This will cause the element to maintain its width. If you increase the padding, the available content space will decrease.

Example

Use the box-sizing property to keep the width at 300px regardless of the padding:

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

Try it yourself

More examples

Set left inner padding
This example demonstrates how to set the left inner padding of a <p> element.
Set right inner padding
This example demonstrates how to set the right inner padding of a <p> element.
Set top inner padding
This example demonstrates how to set the top inner padding of a <p> element.
Set bottom inner padding
This example demonstrates how to set the bottom inner padding of a <p> element.

All CSS inner padding properties

Property Description
padding A shorthand property used to set all the inner padding properties in a single declaration.
padding-bottom Set the bottom inner padding of an element.
padding-left Set the left inner padding of an element.
padding-right Set the right inner padding of the element.
padding-top Set the top inner padding of the element.

Further Reading

Supplementary Books:Box Model: CSS Padding