totn CSS

CSS: padding property

This CSS tutorial explains how to use the CSS property called padding with syntax and examples.

Description

The CSS padding property defines the padding space on all sides of an element.

Syntax

The CSS padding property can be expressed with one, two, three or four values provided. And each value can be expressed as either a fixed value or as a percentage.

One Value

The syntax for the CSS padding property (with 1 value) is:

padding: all;

When one single value is provided, the padding value will apply to all four sides of the element (ie: top, right, bottom, left).

Two Values

The syntax for the CSS padding property (with 2 values) is:

padding: top_bottom left_right;

When two values are provided, the first value will apply to the top and bottom of the element. The second value will apply to the left and right sides of the element.

Three Values

The syntax for the CSS padding property (with 3 values) is:

padding: top right_left bottom;

When three values are provided, the first value will apply to the top of the element. The second value will apply to the right and left sides of the element. The third value will apply to the bottom of the element.

Four Values

The syntax for the CSS padding property (with 4 values) is:

padding: top right bottom left;

When four values are provided, the first value will apply to the top of the element. The second value will apply to the right side of the element. The third value will apply to the bottom of the element. The fourth value will apply to the left side of the element.

The top, right, bottom, and left padding values can be one of the following:

Value Description
fixed Fixed value expressed in px, em, ...
div { padding: 5px; }
div { padding: 4em 5px; }
div { padding: 2px 5px 10px; }
div { padding: 4px 5px 2px 3px; }
percentage Percentage value
div { padding: 8%; }
div { padding: 4% 5%; }
div { padding: 2% 5% 8%; }
div { padding: 4% 5% 2% 3%; }
fixed and percentage
(in combination)
Combination of fixed and percentage values
div { padding: 4% 5px; }
div { padding: 2em 5% 8px; }
div { padding: 4px 5em 2% 3px; }
inherit Element will inherit the padding from its parent element
div { padding: inherit; }

Note

  • Each value in the CSS padding property can be expressed as either a fixed value or as a percentage.
  • You can combine fixed value and percentage values in the CSS padding property.
  • Negative values are not allowed in the CSS padding property.
  • When the value is provided as a percentage, it is relative to the width of the containing block.
  • See also padding-top, padding-bottom, padding-left, and padding-right.

Browser Compatibility

The CSS padding property has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Phone
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the padding property below, exploring examples of how to use this property in CSS with 1, 2, 3, or 4 values (as either a fixed value or as a percentage).

Using Fixed Value

Let's look at a CSS padding example where we provide one value expressed as a fixed value.

div { padding: 5px; }

In this CSS padding example, we have provided one value of 5px which would apply to all 4 sides of the element.

Next, we'll look at a CSS padding example where we provide two values expressed as a fixed value.

div { padding: 5px 10em; }

In this CSS padding example, we have provided two values. The first value of 5px would apply to the top and bottom of the element. The second value of 10em would apply to the left and right sides of the element.

Next, we'll look at a CSS padding example where we provide three values expressed as a fixed value.

div { padding: 5px 10px 15px; }

In this CSS padding example, we have provided three values. The first value of 5px would apply to the top of the element. The second value of 10px would apply to the right and left sides of the element. The third value of 15px would apply to the bottom of the element.

Next, we'll look at a CSS padding example where we provide four values expressed as a fixed value.

div { padding: 5px 10px 12px 8px; }

In this CSS padding example, we have provided four values. The first value of 5px would apply to the top of the element. The second value of 10px would apply to the right side of the element. The third value of 12px would apply to the bottom of the element. The fourth value of 8px would apply to the left side of the element.

Using Percentage

Let's look at a CSS padding example where we provide one value expressed as a percentage.

div { padding: 2%; }

In this CSS padding example, we have provided one value of 2% which would apply to all 4 sides of the element.

Next, we'll look at a CSS padding example where we provide two values expressed as a percentage.

div { padding: 5% 10%; }

In this CSS padding example, we have provided two values. The first value of 5% would apply to the top and bottom of the element. The second value of 10% would apply to the left and right sides of the element.

Next, we'll look at a CSS padding example where we provide three values expressed as a percentage.

div { padding: 2% 5% 10%; }

In this CSS padding example, we have provided three values. The first value of 2% would apply to the top of the element. The second value of 5% would apply to the right and left sides of the element. The third value of 10% would apply to the bottom of the element.

Next, we'll look at a CSS padding example where we provide four values expressed as a percentage.

div { padding: 5% 10% 2% 8%; }

In this CSS padding example, we have provided four values. The first value of 5% would apply to the top of the element. The second value of 10% would apply to the right side of the element. The third value of 2% would apply to the bottom of the element. The fourth value of 8% would apply to the left side of the element.