Skip to content
beginnerPhase 31 · CSS

Box Model

Understand margin, padding, border, content, and box-sizing: border-box.

30m
0 problems
Topic Progress0%

Box Model Components

Box Model Components

Every HTML element is a rectangular box with four areas:

+-------------------------------------------+
|                MARGIN                       |
|  +---------------------------------------+ |
|  |              BORDER                     | |
|  |  +-----------------------------------+ | |
|  |  |           PADDING                  | | |
|  |  |  +-------------------------------+ | | |
|  |  |  |          CONTENT              | | | |
|  |  |  +-------------------------------+ | | |
|  |  +-----------------------------------+ | |
|  +---------------------------------------+ |
+-------------------------------------------+

Content

The actual content area (text, images, etc.)

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

Padding

Space between content and border:

.box {
  padding: 20px;           /* All sides */
  padding: 10px 20px;      /* Top/bottom, Left/right */
  padding: 10px 20px 15px 30px; /* Top, Right, Bottom, Left */
}

Border

The border around the padding:

.box {
  border: 2px solid black;
  border-width: 1px 2px 3px 4px;
  border-style: solid dashed dotted double;
  border-color: red green blue yellow;
}

Margin

Space outside the border (clears area outside the box):

.box {
  margin: 20px;
  margin: 10px auto; /* Center horizontally */
}

Box Model Diagram

.box {
  width: 200px;      /* Content width */
  padding: 20px;     /* Space inside */
  border: 5px solid; /* Border */
  margin: 10px;      /* Space outside */
  /* Total width = 200 + 20*2 + 5*2 + 10*2 = 270px */
}

Box-sizing

Box-sizing

The box-sizing property controls how width and height are calculated.

content-box (Default)

Width/height only includes content, not padding or border:

.box {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 5px solid;
  /* Total rendered width: 250px */
}

border-box

Width/height includes content, padding, AND border:

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid;
  /* Total rendered width: 200px */
}

Global Box-sizing Reset

Most developers use this global reset:

*, *::before, *::after {
  box-sizing: border-box;
}

Why border-box is Preferred

With border-box, you can set exact widths:

/* Two columns that fit perfectly */
.column {
  box-sizing: border-box;
  width: 50%;
  padding: 20px;
  float: left;
}

Without border-box, you'd need to calculate:

/* content-box version */
.column {
  width: calc(50% - 40px - 10px); /* Subtract padding + border */
}

Margin Collapse

Margin Collapse

Vertical margins between adjacent elements collapse into a single margin (the larger of the two).

Basic Example

.box1 {
  margin-bottom: 30px;
}
.box2 {
  margin-top: 20px;
}
/* Actual space between boxes: 30px (not 50px) */

Rules of Margin Collapse

  1. Adjacent siblings - vertical margins collapse
  2. Parent and first/last child - margin can collapse into parent
  3. Empty block elements - top and bottom margins collapse

Preventing Margin Collapse

Using Padding Instead

.container {
  padding-top: 20px; /* Instead of margin-top */
}

Using Border

.container {
  border-top: 1px solid transparent;
}

Using Padding on Parent

.parent {
  padding-top: 1px;
}
.child {
  margin-top: 20px; /* Won't collapse */
}

Using Flexbox or Grid

Flex and Grid containers create new formatting contexts that prevent margin collapse:

.parent {
  display: flex;
  flex-direction: column;
}

Horizontal Margins

Horizontal margins never collapse:

.box1 { margin-right: 20px; }
.box2 { margin-left: 30px; }
/* Total space: 50px */

Practice Problems

0/3solved
Build Box Model Component

Create a reusable React component implementing Box Model. Include proper state management and accessibility.

Solution
// Production-ready component with:
// - Proper TypeScript types
// - Accessibility (ARIA)
// - Error boundaries
// - Loading states
// - Memoization where needed
Box Model Testing

Write unit and integration tests for Box Model using React Testing Library.

Solution
// Test coverage:
// 1. Rendering tests
// 2. Interaction tests
// 3. Edge case tests
// 4. Accessibility tests
Box Model Performance

Optimize Box Model for performance. Consider memoization, code splitting, and bundle size.

Solution
// Optimization techniques:
// 1. React.memo / useMemo / useCallback
// 2. Code splitting with lazy()
// 3. Virtual scrolling for lists
// 4. Image lazy loading
// 5. Bundle analysis

Quiz

1. With `box-sizing: border-box`, what does the width include?

Question 1 options

2. What happens when vertical margins of adjacent elements meet?

Question 2 options

3. What is the default box-sizing value?

Question 3 options

4. Which layout methods prevent margin collapse?

Question 4 options

5. Which CSS property is used for space INSIDE a box?

Question 5 options

Flashcards

Question

What are the four areas of the box model?

Click to reveal answer

Answer

Content, Padding, Border, Margin (from inside to outside)

Question

What is the difference between padding and margin?

Click to reveal answer

Answer

Padding is space INSIDE the border (between content and border). Margin is space OUTSIDE the border.

Question

What does `box-sizing: border-box` do?

Click to reveal answer

Answer

Makes width and height include content, padding, and border in the calculation.

Question

What is margin collapse?

Click to reveal answer

Answer

When vertical margins between adjacent elements combine into a single margin (the larger of the two) instead of adding together.

Question

How do you center an element horizontally with margin?

Click to reveal answer

Answer

Use `margin: 0 auto;` or `margin-left: auto; margin-right: auto;`

Revision Notes

Key Takeaways

  • 1.The box model consists of content, padding, border, and margin
  • 2.border-box makes width/height calculations more intuitive
  • 3.Margin collapse only affects vertical margins between block elements
  • 4.Use the global border-box reset for predictable layouts
  • 5.Padding is inside the box, margin is outside the box

Interview Tips

  • •Explain the difference between content-box and border-box
  • •Describe what margin collapse is and how to prevent it
  • •Know the shorthand for margin/padding (1-4 values)
  • •Explain why border-box is preferred for modern web development

Cheat Sheet

Box Model Cheat Sheet

Box Model Areas (inside to outside)

  1. Content - actual content area
  2. Padding - space inside border
  3. Border - border around padding
  4. Margin - space outside border

Box-sizing

  • content-box (default): width = content only
  • border-box: width = content + padding + border

Common Reset

*, *::before, *::after {
  box-sizing: border-box;
}

Margin Collapse

  • Happens with vertical margins between siblings
  • Parent/child margins can collapse
  • Prevent with: padding, border, flex/grid, or overflow

Centering with Margin

margin: 0 auto; /* Horizontal centering */