The CSS Box Model is a fundamental concept in web design that defines how elements are structured and laid out on a webpage. Every HTML element is treated as a box with four main components:

  1. Content Area 📄
    The innermost part of the box where text, images, or other content resides. Its size is determined by the width and height properties.

  2. Padding 📐
    Space between the content and the border. Use padding to add gaps inside the element.

    Box Model Components

  3. Border 🖋️
    Surrounds the padding and content. Borders can be styled with border-width, border-style, and border-color.

    CSS Border Example

  4. Margin 📏
    Space outside the border, separating elements from each other. Margins are controlled via margin properties.

    Margin Visualization

📌 Key Concepts

  • Total Width = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
  • Total Height = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

🔍 Browser Compatibility

  • IE 10+: Supports modern box model (default)
  • Older Browsers: Use box-sizing: border-box to avoid layout issues
    Learn more about box-sizing

🧠 Practical Example

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid #000;
  margin: 10px;
}

This creates a box with:

  • Content size: 200px × 100px
  • Padding: 20px on all sides
  • Border: 5px thick
  • Margin: 10px around the box

For deeper insights, explore our CSS Layout Fundamentals section.