Box Model

The CSS box model describes how every element is a rectangular box made of four layers — content , padding , border , and margin — and understanding how they stack and size is the key to controlling spacing and layout.

Learn Python, JavaScript, Java and more with free interactive lessons, real projects and AI-powered help. Beginner-friendly.

Part of the free HTML & CSS course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

Imagine a picture frame: The picture itself is the content . The matting around the picture is the padding . The frame itself is the border . And the space between the frame and the wall (or other frames) is the margin .

Every HTML element is a rectangular box. The box model describes how the browser calculates the total size of each element.

By default, width only sets the content width. Padding and border are added on top , making the element bigger than you expect. box-sizing: border-box fixes this by including padding and border inside the width.

The display property controls how an element flows in the page. The three most common values are block , inline , and inline-block .

You now understand the CSS box model — the foundation of every layout on the web. Key takeaways:

Practice quiz

What are the four layers of the CSS box model, from inside to outside?

  • margin, border, padding, content
  • content, padding, border, margin
  • content, margin, border, padding
  • padding, content, margin, border

Answer: content, padding, border, margin. From the inside out: content, then padding, then border, then margin.

Which box layer is the space INSIDE the border, between content and border?

  • margin
  • padding
  • border
  • content

Answer: padding. Padding is the space inside the border surrounding the content; margin is the space outside the border.

Which box layer is the space OUTSIDE the border, between this element and others?

  • padding
  • content
  • margin
  • border

Answer: margin. Margin is the space outside the border separating the element from its neighbours.

With the default box-sizing: content-box, what does the width property set?

  • The content width only — padding and border are added on top
  • The total rendered width including padding and border
  • Only the border width
  • The margin width

Answer: The content width only — padding and border are added on top. In content-box, width sets just the content; padding and border are added outside it, making the element larger than the width value.

An element has width: 300px, padding: 20px, and a 5px border, with the default content-box. What is its total rendered width?

  • 300px
  • 325px
  • 350px
  • 340px

Answer: 350px. 300 + 40 (20px padding each side) + 10 (5px border each side) = 350px in content-box.

What does box-sizing: border-box do?

  • Adds padding and border outside the width
  • Includes padding and border inside the declared width
  • Removes the border entirely
  • Doubles the element's width

Answer: Includes padding and border inside the declared width. border-box includes padding and border inside the width, so a width: 300px element renders at exactly 300px — far more predictable.

How does a display: block element behave?

  • Sits on the same line as other elements and ignores width/height
  • Takes the full width available and starts on a new line
  • Flows inside text and respects width/height
  • Is removed from the layout

Answer: Takes the full width available and starts on a new line. Block elements (div, p, h1–h6, section) take full width and stack vertically on new lines.

What happens when you set width and height on a display: inline element like a span?

  • They apply normally
  • They are ignored
  • They double in size
  • The element becomes a block

Answer: They are ignored. Inline elements (span, a, strong, em) ignore width and height and flow within text.

Which display value sits elements side by side BUT still respects width and height?

  • block
  • inline
  • inline-block
  • none

Answer: inline-block. inline-block flows on the same line like inline but honours width and height like block — the best of both.

What is margin collapsing?

  • Two adjacent vertical margins combine into one (the larger value)
  • Padding turning into margin
  • Borders overlapping
  • Margins being ignored on inline elements

Answer: Two adjacent vertical margins combine into one (the larger value). When two vertical margins touch they collapse into a single margin equal to the larger value. Padding does not collapse.