CSS padding creates space inside an element between its content and border. It controls the inner spacing, making the content not stick directly to the edges. You can use padding as a shorthand property with one, two, or four values, or set each side's padding individually. This property is useful for improving the readability and layout of your elements.

Syntax

Follow the code block below to set padding in CSS code.

/* Shorthand syntax for padding with 1, 2, or 4 values */
padding: 20px;           /* 1 value: applies 20px of padding on all four sides */
padding: 10px 20px;       /* 2 values: 10px for top and bottom; 20px for left and right */
padding: 5px 10px 15px 20px; /* 4 values: top, right, bottom, left respectively */

/* Individual padding properties */
padding-top: value;
padding-right: value;
padding-bottom: value;
padding-left: value;

Explanation:

• 1 Value: When one value is specified, the same padding is applied on all sides.
• 2 Values: The first value is for the top and bottom, and the second value is for the left and right.
• 4 Values: Padding is set in the order: top, right, bottom, and left.
• Individual Properties: You can control each side's padding separately by using specific properties.

Example 1: 1 Value Shorthand

In this example, we apply one value for padding so that all four sides receive an equal amount.

Explanation:

• Padding: The single value 50px ensures 50px of space is applied uniformly to the top, right, bottom, and left.

Example 2: 2 Values Shorthand

In this example, we use two values to set different padding for vertical and horizontal spacing.

Explanation:

• Padding: The first value 10px applies to the top and bottom, while the second value 20px applies to the left and right.

Example 3: 4 Values Shorthand

In this example, we set padding for each side individually using four values.

Explanation:

• Padding: Top padding is 5px, right padding is 10px, bottom padding is 15px, and left padding is 20px.

Example 4: Individual Padding Properties

In this example, we apply individual padding properties for more control. We set separate values for the top and bottom, and use defaults for the left and right.

Explanation:

• Individual Properties:
  • padding-top: Sets a 15px padding at the top.
  • padding-bottom: Sets a 25px padding at the bottom.
  • Left and Right: Not explicitly set, so they remain at their default value (usually 0).

This lesson shows multiple ways to apply padding using both shorthand notation and individual properties. These techniques allow you to create well-spaced, organized layouts that enhance the visual appeal and readability of your elements.