CSS Box Model Demonstration

1️⃣ Full Box Model (Content + Padding + Border + Margin)

This is my content inside the box.

👉 Here you see content with width/height, padding (inside spacing), border (blue line), and margin (space outside the box).

2️⃣ Padding Example

Content inside (padding pushes text away from the border).

👉 Padding adds inner spacing inside the border.

3️⃣ Margin Example

Content inside (margin pushes box away from neighbors).

👉 Margin creates outer spacing between this box and others.

4️⃣ Border Types Example

Solid Border
Dashed Border
Dotted Border
Double Border
Groove Border
Ridge Border
Inset Border
Outset Border