CSS — Box Model

Overview

Learn Box Model in CSS with a clear explanation and a practical example.

What you'll learn

• What Box Model means
• When to use it
• How it works in practice
• A copy‑paste example

Syntax

margin / padding / border

Example

.box{
  margin:12px;
  padding:14px;
  border:1px solid #e5e7eb;
  border-radius:12px;
}

Notes

• Test the example in the Playground.
• Start simple, then expand.

Mistakes

• Mixing up the syntax.
• Not testing the output.

Try: Open the Playground: /en/playground/html