The CSS Box Model

Every HTML element is a rectangle. CSS controls the size of that rectangle through four layers: content, padding, border, and margin. Together they form the box model.

The Four Layers

┌──────────────────────────────────┐
│            margin                │
│  ┌────────────────────────────┐  │
│  │          border            │  │
│  │  ┌──────────────────────┐  │  │
│  │  │       padding        │  │  │
│  │  │  ┌────────────────┐  │  │  │
│  │  │  │    content     │  │  │  │
│  │  │  └────────────────┘  │  │  │
│  │  └──────────────────────┘  │  │
│  └────────────────────────────┘  │
└──────────────────────────────────┘

• content — the actual text or image. Size is set with width and height.
• padding — inner space between the content and the border. The background color extends into padding.
• border — the frame around the padding. Visible and takes up space.
• margin — outer space. Transparent, pushes the element away from its neighbors.

Example

.card {
  width: 300px;
  padding: 16px;
  border: 2px solid #e5e7eb;
  margin: 24px;
}

<div class="card">
  <h2>Python Article</h2>
  <p>A short description...</p>
</div>

The Problem: width does not include padding and border by default

By default, the browser treats width as the width of the content only. Padding and border are added on top.

.card {
  width: 300px;
  padding: 16px;
  border: 2px solid #e5e7eb;
}
/* Actual width: 300 + 16*2 + 2*2 = 336px */

This is counterintuitive and causes unexpected layout shifts.

The Fix: box-sizing: border-box

* {
  box-sizing: border-box;
}

With this rule, width includes padding and border — the element is exactly as wide as you specified.

.card {
  width: 300px;
  padding: 16px;
  border: 2px solid #e5e7eb;
}
/* Actual width: exactly 300px */

Always add box-sizing: border-box at the top of your CSS. This is the first rule in every serious project.

Shorthand notation

padding and margin can be written on one line:

/* All four sides equal */
padding: 16px;

/* Vertical | horizontal */
padding: 8px 16px;

/* Top | horizontal | bottom */
padding: 8px 16px 12px;

/* Top | right | bottom | left (clockwise) */
padding: 8px 16px 12px 0;

The same applies to margin.

Individual sides

.card {
  margin-top: 24px;
  margin-bottom: 24px;
  padding-left: 16px;
  padding-right: 16px;
  border-bottom: 1px solid #e5e7eb;  /* only the bottom border */
}

Margin collapse

Vertical margins between adjacent block elements collapse — the browser takes the larger value instead of adding them together.

.article-title {
  margin-bottom: 24px;
}

.article-meta {
  margin-top: 16px;
}
/* Gap between them: 24px, not 40px */

This surprises many beginners. Horizontal margins do not collapse.

DevBlog: base styles for an article card

/* Reset box-sizing for all elements */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Article card */
.post-card {
  width: 100%;
  max-width: 680px;
  padding: 24px;
  margin-bottom: 32px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.post-card h2 {
  margin-top: 0;      /* remove extra space above the first heading */
  margin-bottom: 8px;
}

.post-card p {
  margin: 0;
}

Summary