CSS Padding:

CSS padding controls the space inside an element, creating spacing between the content and its border. Unlike margins (which create space outside an element), padding increases the internal space without affecting surrounding elements.

1️⃣ CSS Padding Properties

Property	Description
`padding`	Shorthand for setting all four paddings (top, right, bottom, left).
`padding-top`	Sets the padding at the top of an element.
`padding-right`	Sets the padding at the right side.
`padding-bottom`	Sets the padding at the bottom.
`padding-left`	Sets the padding at the left side.

2️⃣ Padding Properties with Examples

1. Setting Equal Padding on All Sides

The padding property can be used to add equal space inside an element.

div {
  padding: 20px; /* Adds 20px padding to all sides */
}

✅ Effect: The content inside the <div> gets 20px space from its border on all sides.

2. Setting Different Padding for Each Side

You can specify different padding values for top, right, bottom, and left.

p {
  padding: 10px 15px 20px 25px; /* top, right, bottom, left */
}

✅ Shorthand order:

padding: top right bottom left;
If two values → padding: top-bottom right-left;
If one value → Applies to all sides

Example:

p {
  padding: 10px 20px; /* top-bottom 10px, left-right 20px */
}

3. Padding Affects Box Size

By default, padding increases an element's size.

div {
  width: 200px;
  padding: 20px;
  border: 2px solid black;
}

💡 Total width = width + left padding + right padding + border
200px + 20px + 20px + 2px + 2px = 244px

✅ To keep the original width, use:

div {
  box-sizing: border-box; /* Prevents padding from increasing width */
}

3️⃣ Summary Table

Property	Example	Description
`padding`	`padding: 20px;`	Adds padding to all sides.
`padding-top`	`padding-top: 10px;`	Adds space inside the top of the element.
`padding-right`	`padding-right: 15px;`	Adds space inside the right of the element.
`padding-bottom`	`padding-bottom: 20px;`	Adds space inside the bottom of the element.
`padding-left`	`padding-left: 25px;`	Adds space inside the left of the element.
`box-sizing: border-box;`	`box-sizing: border-box;`	Keeps padding inside the defined width.

4️⃣ Conclusion

CSS padding helps create space inside elements, making content more readable and structured. It differs from margins (which create space outside elements). Using box-sizing: border-box; prevents padding from affecting the total element width.