Box Model Intro

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Be able to see every element as a box

In CSS, every element is treated as a box. The Box Model has four parts: Content, Padding, Border, Margin. Most layout problems come from not being able to tell these four apart. Content is where the inner text/image lives, padding is the space between the content and the border, border is the boundary line itself, and margin is the space outside the border.

css

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid red;
  margin: 30px;
  box-sizing: border-box;
}

You should see

A box will have its content width, padding, border, and margin all in place. Thanks to box-sizing: border-box;, width calculations become much more predictable.

Tip

In modern projects, it's common to use * { box-sizing: border-box; } as a reset. It makes layout much easier to predict.