The padding Property

The padding property defines the inner space between an element's content and its border. It is the third layer of the CSS Box Model, sitting directly inside the border and surrounding the content area.

The key distinction from margin is that the element's background color or background image extends into the padding area, making padding part of the element's visible space.

Syntax and Shorthands

Similar to margin, padding is a shorthand property that allows you to set the padding on all four sides (top, right, bottom, left) using 1, 2, 3, or 4 values, or by using individual longhand properties.

1. The padding Shorthand

Syntax	Description
padding: 15px;	Sets all four sides (top, right, bottom, left) to $15\text{px}$.
padding: 10px 20px;	Sets top/bottom to $10\text{px}$, and left/right to $20\text{px}$.
padding: 10px 20px 5px;	Sets top to $10\text{px}$, left/right to $20\text{px}$, and bottom to $5\text{px}$.
padding: 10px 20px 5px 30px;	Sets padding in Top, Right, Bottom, Left order (clockwise).

2. Longhand Properties

For setting individual sides:

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

styles.css

/* Example using longhand properties */
.button {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

Padding and Total Size

As discussed in the introduction to the Box Model, padding directly affects the element's total size, unless you use box-sizing: border-box;.

Default Behavior (content-box)

If you use box-sizing: content-box (the default), adding padding will increase the total width and height of the element.

• width: 200px; + padding: 20px; = Total visual width of $240\text{px}$.

Recommended Behavior (border-box)

If you use box-sizing: border-box, adding padding will reduce the size of the content area but keep the total element size fixed.

• width: 200px; + padding: 20px; = Total visual width remains $200\text{px}$.

It is almost always recommended to use border-box for predictable layout management.

Practical Use Cases for Padding

1. Readability: Adding horizontal padding to text containers prevents lines of text from running right up against the edge of the screen or container, greatly improving readability.
2. Touch Targets: Increasing the padding around interactive elements (like buttons or links) makes the clickable area larger, improving accessibility and usability on touch devices.
3. Visual Balance: Padding is essential for creating visual balance and "white space" around content blocks, separating them visually from the border.

Interactive padding Demo

Use the live editor to adjust the padding on the blue box. Observe how the content moves inward and the blue background area expands outward, without moving the red margin boundary.