CSS Padding


🔹 What is CSS Padding?

CSS Padding is the space between the content of an element and its border.
It pushes the content inward, creating spacing inside the element.


🔸 Syntax
element {
  padding: 20px;
}

✅ Adds 20px padding to all four sides.


🔸 Individual Sides

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

🔸 Shorthand Padding Property

padding: 10px 15px 20px 25px;

This means:

  • Top → 10px

  • Right → 15px

  • Bottom → 20px

  • Left → 25px


🔸 Shorter Forms

padding: 10px 15px;
/* Top & Bottom = 10px, Left & Right = 15px */

padding: 10px 15px 20px;
/* Top = 10px, Right & Left = 15px, Bottom = 20px */

🔸 Effect on Total Size

By default, padding increases the total size of the element (unless box-sizing: border-box is used).


Practice Questions

Q1. Apply 25px padding on all sides of a <div>.

Q2. Set only the top padding of a paragraph to 10px.

Q3. Add 15px left padding to an image element.

Q4. Use shorthand to set: Top = 5px, Right = 10px, Bottom = 15px, Left = 20px.

Q5. Apply 10px padding to the top and bottom, and 5px to left and right.

Q6. Write a class .card with 20px padding all around.

Q7. Add a 10px bottom padding to all <h2> elements.

Q8. Use internal CSS to add 15px right padding to all <li> items.

Q9. Write a rule that applies different padding for each side on a container.

Q10. Prevent padding from increasing element size using box-sizing.


Go Back Top