What is the box model?

Learn that every HTML element is a box and its layers.

What is the box model?

Every HTML element is drawn as a box. The box model describes four layers of this box from inside out: content, padding, border and margin.

The browser computes each layer separately. Content is where text or images sit; padding is breathing room between content and border; border is the box's outline; margin is the distance to neighboring boxes.

Telling the four layers apart

The content area is set by width and height; this is where text sits. padding is the gap separating content from border; it takes the background color but is not content.

border is the frame of the box; its width and color are set separately. margin is transparent, has no background, and pushes neighbor boxes away. Margin can be negative; padding cannot.

Exercise Make the box visible

Write a declaration block for the .box selector. Add a border and a padding declaration so the box model becomes visible. For example border: 2px solid #444; and padding: 16px;.

Show example solution

.box {
  border: 2px solid #444;
  padding: 16px;
}

Test yourself

Which is the innermost layer of the box model?
- padding
- margin
- content
- border
Show answer

content — Correct. Content sits innermost; then padding, border and margin go outward.
Match each layer to its role

content

Where text and images sit
padding

Gap between content and border
border

The frame of the box
margin

Space that pushes neighbor boxes

Set the content height

.box {
  width: 200px;
  ____: 100px;
}

Show answer

.box {
  width: 200px;
  height: 100px;
}

Next lesson: Width and height

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies