CSS Padding

CSS padding is the space between the content of an element and its border. It creates inner spacing within an element.

Box Model Context

Padding is a part of the CSS Box Model, which consists of:

1. Content – The actual text or image.
2. Padding – Space around the content.
3. Border – A line surrounding the padding.
4. Margin – Space outside the border.

---

Example 1: No Padding

<div style=”border: 2px solid black ;”>

No padding here.

</div>

This will show the text right next to the border, because there is no inner space.

---

Example 2: Same Padding on All Sides

<div style=”border: 2px solid blue; padding: 20px;”>

Padding on all sides!

</div>

This adds 20px of space inside the box — between the text and the border — on all four sides.

---

Example 3: Different Padding for Each Side

<div style=”border: 2px solid green; padding: 10px 20px 30px 40px;”>

Top: 10px, Right:20px, Bottom: 30px, Left: 40px

</div>

Example 4: Padding with Background Color

<div style = ” border : 2px solid red ; padding : 15px ; background-color : yellow ; “>

Padding + background-color.

</div>

Padding Properties:

Padding in CSS is the space between the content and the border of an element. It creates inner spacing within the element’s box.

You can control padding using the following properties:

1. padding

• Sets padding on all four sides of an element (top, right, bottom, and left).
• You can provide one to four values:
  • padding: 20px; → all sides
  • padding: 10px 20px; → top & bottom = 10px, left & right = 20px
  • padding: 10px 15px 20px; → top = 10px, left & right = 15px, bottom = 20px
  • padding: 10px 15px 20px 25px; → top, right, bottom, left

---

2. padding-top

• Sets padding only on the top side of the element.

---

3. padding-right

• Sets padding only on the right side.

---

4. padding-bottom

• Sets padding only on the bottom side.

---

5. padding-left

• Sets padding only on the left side.

---

📌 Important Notes:

• Padding values can be set in units like px, em, %, etc.
• Padding adds space inside the element and increases its total size.
• Padding does not affect margins or borders.
• Background color and images extend into the padding area.

---

Padding values go in clockwise order:

• Top → 10px
• Right → 20px
• Bottom → 30px
• Left → 40px

---

Example 4: Padding with Background Color

<div style = ” border : 2px solid red ; padding : 15px ; background-color : yellow ; “>

Padding + background color

</div>

The padding makes the yellow background more spacious around the text, not squished.

---

Purpose:

• Creates inner spacing
• Gives content breathing room
• Improves layout and readability

---

Values

• Can use: px, em, %, rem, etc.
• Can be different for each side.

---

Key Points:

• Padding increases the size of the element.
• Padding does not overlap with the margin or border.
• Background color of the element extends into the padding area.
• It does not affect other elements around it (unlike margin).
• You can apply padding to one side or all sides.
• Padding is useful for making content more readable by creating breathing space.

---

Shorthand Padding:

• padding: 20px; → All sides
• padding: 10px 15px; → Top & Bottom = 10px, Left & Right = 15px
• padding: 10px 15px 5px; → Top = 10px, Left & Right = 15px, Bottom = 5px
• padding: 10px 15px 5px 20px; → Top, Right, Bottom, Left

---

Think of padding like a cushion around your content inside a box. It pushes the content away from the border, giving it breathing room.CSS padding is the space inside an element, between the content and the border.