What is the Box Model?

Every HTML element on a web page is treated as a rectangular box. The CSS Box Model describes how these boxes are structured and how their total size is calculated.

The box model is made up of four layers, arranged from the innermost to the outermost.

Content: The actual text, image, or other media inside the element
Padding: Space between the content and the border
Border: A line that surrounds the content and its padding.
Margin: The outer space beyond the border that keeps the element apart from surrounding elements.

Visualizing the Box Model

CSS

.box {
  /* Content */
  width: 300px;
  height: 200px;

  /* Padding - space inside the border */
  padding: 20px;

  /* Border */
  border: 2px solid #333;

  /* Margin - space outside the border */
  margin: 30px;

  background-color: #e8f4fd;
}

With the default box model, the total width of this element is calculated as:

Total width = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

That is: 30 + 2 + 20 + 300 + 20 + 2 + 30 = 404px total space used

Content Width and Height

The width and height properties define only the dimensions of the content area.

CSS

.content-box {
  width: 400px;
  height: 250px;
  background-color: #3498db;
  color: white;
}

.auto-width {
  width: auto;  /* Takes up available space (default for block elements) */
}

.full-width {
  width: 100%;  /* 100% of parent's width */
}

Padding

Padding adds space between the content and the border, pushing the content inward.

CSS

/* Individual sides */
.box {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}

/* Shorthand - all sides */
.box {
  padding: 20px;          /* All four sides */
}

/* Shorthand - vertical | horizontal */
.box {
  padding: 10px 20px;     /* top/bottom: 10px, left/right: 20px */
}

/* Shorthand - top | horizontal | bottom */
.box {
  padding: 10px 20px 30px;
}

/* Shorthand - top | right | bottom | left (clockwise) */
.box {
  padding: 10px 20px 30px 40px;
}

Practical Padding Examples

CSS

.button {
  padding: 12px 24px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
}

.card {
  padding: 24px;
  background-color: white;
  border-radius: 8px;
}

.section {
  padding: 60px 20px;
}

.nav-link {
  padding: 8px 16px;
}

Border

The border lies between the padding and the margin.

CSS

/* Border shorthand: width style color */
.box {
  border: 2px solid #333;
}

/* Individual properties */
.box {
  border-width: 2px;
  border-style: solid;
  border-color: #333;
}

/* Individual sides */
.box {
  border-top: 3px solid #3498db;
  border-bottom: 1px dashed #ccc;
  border-left: none;
  border-right: none;
}

/* Border styles */
.solid { border: 2px solid #333; }
.dashed { border: 2px dashed #333; }
.dotted { border: 2px dotted #333; }
.double { border: 4px double #333; }

Border Radius

The `border-radius` property rounds the corners of an element.

CSS

.rounded {
  border-radius: 8px;
}

.pill {
  border-radius: 50px;
}

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

/* Individual corners */
.custom-corners {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

Margin

Margin creates space outside the border, separating elements from each other.

CSS

/* Individual sides */
.box {
  margin-top: 20px;
  margin-right: 10px;
  margin-bottom: 20px;
  margin-left: 10px;
}

/* Shorthand - same as padding */
.box {
  margin: 20px;           /* All sides */
  margin: 20px 10px;      /* Vertical | horizontal */
  margin: 10px 20px 30px; /* top | horizontal | bottom */
  margin: 10px 20px 30px 40px; /* top | right | bottom | left */
}

/* Auto margins for centering */
.centered {
  width: 800px;
  margin: 0 auto;  /* Centers horizontally */
}

Margin Collapse

When vertical margins of two block elements touch, they collapse into a single margin equal to the larger of the two. This is one of the most common sources of confusion in CSS.

CSS

.paragraph1 {
  margin-bottom: 30px;
}

.paragraph2 {
  margin-top: 20px;
}

/* The gap between them is 30px, NOT 50px */
/* The larger margin wins */

Margin collapse only happens vertically (top and bottom), never horizontally (left and right).

Box Sizing

By default, CSS uses `content-box` sizing, where `width` and `height` only apply to the content area. This means padding and border are added to the total size.

content-box (Default)

CSS

.content-box-example {
  box-sizing: content-box; /* Default */
  width: 300px;
  padding: 20px;
  border: 2px solid #333;
  /* Total width: 300 + 20 + 20 + 2 + 2 = 344px */
}

border-box (Recommended)

With `border-box`, the `width` and `height` include padding and border. This makes sizing much more predictable.

CSS

.border-box-example {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 2px solid #333;
  /* Total width: 300px (padding and border are included) */
  /* Content area: 300 - 20 - 20 - 2 - 2 = 256px */
}

The Universal Box Sizing Reset

This is one of the most important CSS patterns. Apply it at the top of every stylesheet:

CSS

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

This ensures every element uses `border-box`, making layout calculations intuitive and predictable.

Max and Min Properties

These properties set boundaries on how large or small an element can be.

CSS

.responsive-container {
  width: 90%;
  max-width: 1200px;   /* Never wider than 1200px */
  min-width: 320px;    /* Never narrower than 320px */
  margin: 0 auto;
}

.flexible-image {
  max-width: 100%;     /* Never wider than container */
  height: auto;        /* Maintain aspect ratio */
}

.min-height-section {
  min-height: 500px;   /* At least 500px tall */
  padding: 40px;
}

Summary

The CSS Box Model is fundamental to understanding layout in CSS. Every element is a box with content, padding, border, and margin. Always use `box-sizing: border-box` for predictable sizing, and remember that vertical margins collapse. Mastering the box model gives you precise control over spacing and sizing in your layouts.

In the next article, you will learn about the CSS display property.