The padding property sets the space between an element's content and its border, and unlike margin, that space is filled with the element's own background.

Syntax

padding: top right bottom left;
padding: vertical horizontal;
padding: all-sides;

Deep Dive Course

padding accepts the same one, two, or four-value shorthand syntax as margin, but padding's space sits inside the border and is filled with the element's own background color or image, visually distinct from margin's transparent space outside the border that shows the parent or page's background instead. Padding also directly adds to an element's total rendered size under the default box-sizing: content-box, since padding is added on top of the specified width and height, which is the underlying reason box-sizing: border-box exists, letting padding be included within, rather than added onto, a specified width.

1Understanding Padding

💡

Under the default box-sizing: content-box, adding padding increases an element's total rendered width and height beyond its specified width/height values — if that's not the behavior you want, apply box-sizing: border-box so padding is included within the specified dimensions instead.

editor.html

.button {
  padding: 12px 24px;
  background: blue;
}

localhost:3000

2Practical Example

Here is a real-world application of Padding showing how it is used in production CSS code.

editor.html

.box {
  width: 200px;
  padding: 20px;
  box-sizing: content-box;
}

localhost:3000

3Best Practices

Follow these guidelines when working with Padding:

1. Use padding to create internal breathing room between an element's content and its edges, distinct from margin's external spacing between elements

2. Account for padding adding to an element's total size under the default box-sizing, or apply box-sizing: border-box if you want padding included within a fixed width instead

3. Use the one/two/four-value shorthand for concise padding declarations, rather than four separate padding-top/right/bottom/left declarations, unless only one side actually needs a distinct value

⚠️

Tip: Under the default box-sizing: content-box, adding padding increases an element's total rendered width and height beyond its specified width/height values — if that's not the behavior you want, apply box-sizing: border-box so padding is included within the specified dimensions instead.

editor.html

.button {
  padding: 12px 24px;
  background: blue;
}

localhost:3000

Examples

Example 01Basic Usage

.button {
  padding: 12px 24px;
  background: blue;
}

Example 02Advanced Example

.box {
  width: 200px;
  padding: 20px;
  box-sizing: content-box;
}

Best Practices

Use padding to create internal breathing room between an element's content and its edges, distinct from margin's external spacing between elements
Account for padding adding to an element's total size under the default box-sizing, or apply box-sizing: border-box if you want padding included within a fixed width instead
Use the one/two/four-value shorthand for concise padding declarations, rather than four separate padding-top/right/bottom/left declarations, unless only one side actually needs a distinct value

Interview Question

Why does adding padding to an element with a fixed width increase its total rendered width, under CSS's default box-sizing behavior?▼

Hint: Think about what exactly the 'width' property specifies under content-box, the default box-sizing value — the content area alone, or the full rendered box including padding and border?

Under the default box-sizing value, content-box, the width and height properties specify the size of only the content area itself, explicitly excluding any padding or border — padding and border are then added on top of that specified content width, expanding the element's total rendered footprint beyond the width value you actually wrote. This means a 200px-wide element with 20px of padding on each side ends up occupying 240px total, 200px of content plus 20px of padding on the left and 20px on the right, which often surprises developers expecting the width property alone to fully determine the element's final rendered size. This exact behavior is precisely the motivation behind box-sizing: border-box, which instead makes width and height represent the element's full final size, including padding and border, automatically shrinking the actual content area to make room for them instead of expanding the total box.

Exercises

MediumPractice using Padding in a real scenario.

View Solution

.button {
  padding: 12px 24px;
  background: blue;
}

Frequently Asked Questions

Why does adding padding to an element with a fixed width increase its total rendered width, under CSS's default box-sizing behavior?▼

Related Functions

MarginBox-sizingBorders