CSS and the Box Model

Web Development · 3 minute lesson

CSS turns a structured document into a visual interface. A rule selects elements and assigns property values. When a layout looks wrong, the box model is often the best place to start: each box has content, padding, a border, and a margin.

Padding creates space inside the border. Margin separates a box from its neighbors. With the default content-box sizing, a declared width applies to the content area; padding and borders add to the final size. Setting box-sizing to border-box includes padding and borders in that declared width.

Build a small spacing scale and reuse it. Consistent spacing makes a page feel organized without requiring complicated decoration. Use the browser inspector to view the computed box model, then change one property at a time. This is faster than guessing which rule causes a gap.

Try the example

* { box-sizing: border-box; }

.lesson-card {
  max-width: 36rem;
  margin: 1rem auto;
  padding: 1.5rem;
  border: 1px solid #dbe3ec;
  border-radius: 1rem;
}

Practice

Create a card with a heading and a paragraph. Change its padding from one rem to two rem. Then change its margin. Describe which space moves inside the border and which space moves outside.

Continue learning: Official documentation.