Practice Set 1:

Padding - Space inside element

Practice Set 1.1:

This box has 20px padding on all sides.

Practice Set 1.2:

Practice Set 1.3:

Top padding is more!

Practice Set 2:

Space Outside the element

Practice Set 2.1:

First box
Second box

Practice Set 2.2:

Centered Box

Practice Set 2.3:

Margins make room outside the element.
This has margin of 30px

Margins make room outside the element.
This has margin of 10px

Margins make room outside the element.
This has margin of 0px

Margins make room outside the element.
This has margin of auto

Practice Set 3:

Flexbox - Smart Layouts

Practice Set 3.1:

Box 1
Box 2
Box 3
Box 4
Box 5

Practice Set 3.2:

align-items: flex-start

Centered

align-items: flex-end

Centered

Practice Set 3.3:

Column 1
Column 2
Column 3

Section 1

Advanced Yet Visual Concept Practice: Padding vs Margin vs Flex

Section 1: Padding vs Margin

Padding
Inside spacing (padding)
pushes content inward
Margin
Outside spacing (margin)
pushes elements away

Section 2: Padding + Margin Together

Padding gives inner space.
Margin gives outer space.

🧠 Use Dev Tools to see the box model!

Section 3: Flexbox Behavior

Flex Child 1
Flex Child 2
Flex Child 3

Key Concepts Summary Table

Property Affects Moves? Acts On Common Use
padding Inner space Inside the element Content Button sizing, spacing inside cards
margin Outer space Around the element Surrounding area Pushing items apart, centering blocks
display: flex Layout Item arrangement Children of container Responsive layouts

Bonus: Visual Challenge Task

Challenge Box
Has both padding & margin