The CSS Box Model: Space & Size

Every element in CSS is a rectangular box. Understanding how these boxes work is fundamental to controlling layout and spacing in web design.

What is the Box Model?

Margin
Border
Padding
Content

The CSS box model consists of four layers surrounding content:

  1. Content: The actual text/images
  2. Padding: Space inside the border
  3. Border: Outline around the padding
  4. Margin: Space outside the border

Box-Sizing Property

/* Default behavior */
.content-box {
  box-sizing: content-box;
  width: 300px;
  padding: 20px;
  border: 5px solid #333;
  /* Total width = 300 + 40 + 10 = 350px */
}

/* Modern approach */
.border-box {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 5px solid #333;
  /* Total width = 300px (content shrinks) */
}
→
Key difference:
- content-box (default): Adds padding/border to declared width
- border-box: Includes padding/border in declared width

Always set box-sizing: border-box; globally for predictable sizing:

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

Margin: External Space

.element {
  margin: 20px; /* All sides */
  margin: 10px 20px; /* Top/Bottom Left/Right */
  margin: 5px 10px 15px 20px; /* T R B L */
}

/* Special values */
margin: 0 auto; /* Horizontal centering */
margin-top: -10px; /* Negative margin */
→
Creates space between elements. Collapses vertically between adjacent elements.

Use margins to separate elements from each other. Negative margins can pull elements closer.

Padding: Internal Space

.element {
  padding: 15px; /* All sides */
  padding: 10px 5%; /* Top/Bottom Left/Right */
  padding: 5px 10px 15px 0; /* T R B L */
}
→
Creates space inside elements between content and border. Affects background/click area.

Use padding to create breathing room inside elements. Doesn't collapse like margins.

Border: The Visible Edge

.element {
  border: 2px solid #3498db; /* Shorthand */
  border-width: 1px 2px 3px 4px;
  border-style: dashed;
  border-color: #e74c3c;
  border-radius: 8px; /* Rounded corners */
}
→
Visible boundary around elements. Supports different styles (solid, dashed, dotted), colors, and rounded corners.

Borders appear between padding and margin. Use border-radius for modern rounded interfaces.

Common Box Model Errors

/* Unexpected overflow */
.container {
  width: 100%;
  padding: 20px; /* Causes horizontal scroll */
}

/* Margin collapse confusion */
.box1 { margin-bottom: 30px; }
.box2 { margin-top: 20px; }
/* Actual space = 30px (not 50px) */

/* Forgetting box-sizing */
.column {
  width: 33.33%;
  padding: 15px; /* Breaks 3-column layout */
}

Always account for box model properties in your layouts. Use browser DevTools to inspect element dimensions.

Practical Layout Example

/* Modern card component */
.card {
  width: 300px;
  background: white;
  border-radius: 8px;
  border: 1px solid #eee;
  margin: 20px auto;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Layout with box model */
.header {
  padding: 1rem 5%;
  margin-bottom: 2rem;
}
.sidebar {
  width: 25%;
  padding-right: 1.5rem;
}
→
Real-world applications:
1. Consistent spacing between components
2. Controlled content density
3. Visual hierarchy through size
4. Responsive spacing with %/em units

Your Task: Box Model Implementation

Apply box model properties to the starter HTML:

  1. Set global box-sizing: border-box for all elements
  2. Give .box1:
    • Content width: 200px, height: 150px
    • Padding: 20px all sides
    • Margin: 15px all sides
    • 1px solid border with color #3498db
  3. Give .box2:
    • Content width: 200px, height: 150px
    • Padding: 10px top/bottom, 30px left/right
    • Margin: 20px top, 10px bottom, auto left/right
    • Dashed border 3px with color #e74c3c
  4. Create visual layers for .spacing-example:
    • Margin: 20px (blue background)
    • Border: 5px solid green
    • Padding: 30px (orange background)
    • Content: 100px height (white background)
  5. Create a simple layout for .layout-example:
    • Header: full width, 80px height, 20px padding
    • Main content: 70% width, 300px height, 15px padding
    • Sidebar: 25% width, 300px height, 10px padding
    • Footer: full width, 50px height, 10px padding

Remember: Use the box model properties to control spacing and dimensions precisely. Check your work using browser DevTools.

Section 1/8What is the Box Model?

What is the Box Model?

The CSS box model consists of four layers surrounding content:

The CSS Box Model: Space & Size

Every element in CSS is a rectangular box. Understanding how these boxes work is fundamental to controlling layout and spacing in web design.

What is the Box Model?

Margin
Border
Padding
Content

The CSS box model consists of four layers surrounding content:

  1. Content: The actual text/images
  2. Padding: Space inside the border
  3. Border: Outline around the padding
  4. Margin: Space outside the border
Preview