CSS Padding

CSS padding Property

The padding property in CSS controls the space between an element’s content and its border. It creates inner spacing inside a component, improving readability and layout structure.

1. Syntax

selector {
  padding: value; /* Applies to all sides */
}

• value → Defines the space (e.g., 10px, 1em, 5%, auto).
• You can use pixels (px), percentages (%), em, rem, and other units.

2. Padding for Each Side

Property	Description
padding-top	Sets padding on the top side.
padding-right	Sets padding on the right side.
padding-bottom	Sets padding on the bottom side.
padding-left	Sets padding on the left side.

Example:

div {
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 20px;
  padding-left: 25px;
}

3. Shorthand Padding (One Line)

You can specify padding in one line instead of four separate properties.

Syntax	Explanation
padding: 20px;	Applies 20px to all sides.
padding: 10px 20px;	10px for top & bottom, 20px for left & right.
padding: 10px 15px 20px;	10px top, 15px left & right, 20px bottom.
padding: 5px 10px 15px 20px;	5px top, 10px right, 15px bottom, 20px left (clockwise order).

Example:

div {
  padding: 10px 20px 30px 40px;
}

✅ Top → Right → Bottom → Left (Clockwise Order).

4. Padding with Background Color

Padding increases the area filled by the background color.

div {
  background-color: lightblue;
  padding: 20px;
}

✅ The background extends to include the padding area.

5. Padding in Percentage (%)

Padding can be responsive using percentages.

div {
  padding: 10%;
}

✅ 10% is based on the element’s width, not height.

6. Padding vs Margin (Difference)

Property	Effect
padding	Adds space inside the element (between content and border).
margin	Adds space outside the element (between the element and others).

Example:

div {
  padding: 20px; /* Inside spacing */
  margin: 20px; /* Outside spacing */
}

7. Removing Padding (padding: 0;)

* {
  padding: 0;
}

✅ Removes all padding for every element.

8. Browser Support

✅ Fully supported in all browsers.