LearnViz CompSci
Home / Learn / Web Development / Box Model

Beginner Topic 7 of 51 Web Development

Box Model

Content, padding, border and margin around every element.

How it works

The CSS box model says that every element is a rectangular box made of content, padding, border and margin, from the inside out. With the default content-box sizing, width and height apply to the content only, so padding and borders add to the total size; with border-box sizing, they are included. Vertical margins between adjacent block elements can collapse into one.

Step-by-step walkthrough

  1. Every element is a box.
  2. Content holds text or images.
  3. Padding is space around content inside the border.
  4. The border wraps the padding.
  5. Margin is the space outside, and box-sizing: border-box includes padding and border in the width.

Where it is used

Spacing, alignment, sizing and layout of every element depend on the box model. Most modern stylesheets set box-sizing to border-box for predictable widths.

Common pitfall

Forgetting that padding and borders add to width makes elements overflow their containers. Margin collapse surprises people, especially between parent and first child. Percent padding is relative to the width, not the height. Inline elements ignore vertical width and height. Inspect boxes in DevTools to see computed values and use consistent spacing scales.

Where it fits in the course

Box Model is topic 7 of 51 in Web Development, rated Beginner. It follows CSS Selectors. The next topic is Flexbox.

Practice and explore

How to study this topic

  1. Read the explanation above and restate the definition in your own words.
  2. Open the interactive lesson and answer its mini quiz.
  3. Read the common pitfall, then write a short example that avoids it.
  4. Check your understanding in the Web Development quiz, and revisit the topic if you miss a question.

Frequently asked questions

What is Box Model?
Content, padding, border and margin around every element. It belongs to Web Development and is a beginner-level topic.
Where do people use Box Model?
Spacing, alignment, sizing and layout of every element depend on the box model.
What is the most common mistake with Box Model?
Forgetting that padding and borders add to width makes elements overflow their containers.
What should I learn before this topic?
Start with CSS Selectors, the topic just before it in Web Development.
How can I practice it?
Answer the mini quiz in the interactive lesson, then take the Web Development quiz.
Is Box Model hard to learn?
It is a Beginner topic, so it works as an entry point. If the terms are new, read the explanation twice and try the visualizer before the quiz.
How long does it take to learn Box Model?
Most learners can read the explanation and finish the interactive lesson in under an hour. Fluency comes from applying the idea, so plan a few short practice sessions with the quiz.
Which topics are related to Box Model?
CSS Selectors, Flexbox, CSS Basics are closely connected. The full list is in the related topics section of this page.
What should I study after Box Model?
Continue with Flexbox, the next topic in Web Development.

Related topics