? CSS Padding

⚡ Quick Overview

Padding adds inner space between the content and the border of an element.
It does not create space outside the element (that’s what margin does).
You can set padding for all sides at once or control each side individually.
Common units: px, em, rem, %.

? Key Concepts

Uniform padding: One value applies to all four sides.
Shorthand padding: Use 1–4 values for top, right, bottom, left.
Directional padding: Use padding-top, padding-right, padding-bottom, padding-left.
Box model impact: Padding increases the visual size of the box.

? Syntax & Theory

Basic syntax uses a selector and the padding property:

? View Code Example

/* Basic padding syntax for any element */
selector {
padding: value;
}

Shorthand with 1–4 values:

padding: 20px; → top, right, bottom, left all 20px
padding: 10px 20px; → top & bottom 10px, left & right 20px
padding: 5px 10px 15px; → top 5px, left & right 10px, bottom 15px
padding: 5px 10px 15px 20px; → top, right, bottom, left (clockwise)

? Code Examples

1️⃣ Uniform Padding

Same padding on all four sides of the element.

? View Code Example

/* Same padding on all sides of the box */
.container {
padding: 20px;
}

2️⃣ Vertical & Horizontal Padding

Control vertical (top/bottom) and horizontal (left/right) spacing separately.

? View Code Example

/* Vertical padding (top & bottom), horizontal padding (left & right) */
.vertical-padding {
padding: 10px 0;
}

.horizontal-padding {
padding: 0 20px;
}

3️⃣ Individual Sides

Fine-tune padding for each side of the element.

? View Code Example

/* Different padding for each side of the box */
.card {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 12px;
padding-left: 8px;
}

? Live Output

Inside vs Border

This paragraph has padding, so there is extra space between this text and the dashed border.

Padding grows the box from the inside without changing the outer margin.

? Padding Properties Reference

Common padding-related properties and example values:

Property	Description	Example Value
`padding`	Sets padding on all four sides	`20px`, `2em`, `10%`
`padding-top`	Sets padding on the top side	`10px`
`padding-right`	Sets padding on the right side	`15px`
`padding-bottom`	Sets padding on the bottom side	`10px`
`padding-left`	Sets padding on the left side	`15px`

? Tips:

Use px for precise control, em/rem for scalable, responsive designs, and % when padding should depend on container size.
Remember: padding = inside space, margin = outside space.
Combine padding with width or max-width to create nicely centered content inside cards or boxes.
Avoid excessive padding that can cause content to look cramped or overflow on small screens.

? Practice Tasks:

Create a <div> with a border and apply different padding values (e.g., 5px, 20px, 40px) to see how the inner spacing changes.
Use padding-top, padding-right, padding-bottom, and padding-left individually on a card component and observe how each side moves.
Experiment with padding using px, em, and % to understand how each unit behaves in different layouts.