CSS Padding

CSS Padding

CSS Padding is used to create space inside an element, between its content and its border. Padding helps improve readability and controls the layout by giving content some breathing room.

Unlike margin (which creates space outside the border), padding is part of the element’s internal box model and affects the background of the element.

---

CSS Padding Properties

• padding-top: Sets the space above the content.
• padding-right: Sets the space to the right of the content.
• padding-bottom: Sets the space below the content.
• padding-left: Sets the space to the left of the content.
• padding: A shorthand to set all four paddings in one declaration.

---

Example: Applying Padding in CSS

---

Padding Shorthand Syntax

You can apply padding in different combinations:

---

Box Model Reminder

Padding is part of the CSS box model. It is placed between the content and the border and affects the total size of the element unless box-sizing: border-box is used.

---

Key Takeaways

• Padding adds space inside an element, between its content and border.
• You can set padding for each side separately or use shorthand for convenience.
• Padding affects the background area of the element.
• Padding is useful for spacing text, buttons, and containers internally.
• The padding shorthand follows the order: top → right → bottom → left.