The box model, sizing, and spacing

What you will build

Build predictable lesson cards and distinguish content, padding, border, and margin.

Understand the idea first

Border-box includes padding and border in the declared size.

Build it step by step

*,
*::before,
*::after {
  box-sizing: border-box;
}
.lesson-card {
  max-width: 42rem;
  padding: 1.5rem;
  border: 1px solid #fed7aa;
  margin-block: 1rem;
  border-radius: 0.75rem;
}

1. Add lesson-card to one section.
2. Compare computed width before and after global border-box sizing.
3. Change padding and margin separately.
4. Use max-width and narrow the viewport to confirm no overflow.

Read the important lines

• Border-box includes padding and border in the declared size.
• Logical properties adapt to writing modes.
• A spacing rhythm is easier to maintain than random values.

Common mistakes and what to check

Practice without copying

Create two equal cards with consistent padding and a 1rem gap; record the computed width.

Completion check

• I produced the required visible result
• I can explain the input, processing, and output
• I tested normal, edge, and failure cases