Lesson 3 of 9

The Box Model

Every element is drawn as a box made of content, padding, border and margin. Understanding this box model makes sizing and spacing much more predictable.

The box model defines how the browser calculates the size and spacing of every element. From inside out: content → padding → border → margin. Understanding this model is the key to understanding layout.

/* Box model components */
.box {
  /* Content area */
  width: 300px;
  height: 200px;

  /* Padding — space inside the border */
  padding: 20px;                  /* all sides */
  padding: 10px 20px;             /* vertical horizontal */
  padding: 10px 20px 15px 20px;   /* top right bottom left */

  /* Border */
  border: 2px solid #333;
  border-radius: 8px;             /* rounded corners */
  border-top: 4px solid blue;     /* individual sides */

  /* Margin — space outside the border */
  margin: 0 auto;                 /* 0 top/bottom, auto left/right = centered */
  margin-bottom: 16px;
}

/* CRITICAL: Use border-box sizing */
/* Without it, padding and border ADD to the width */
/* With it, padding and border are INCLUDED in the width */
* {
  box-sizing: border-box;  /* Put this in every project. Always. */
}

/* Display types */
.block {
  display: block;      /* Takes full width, starts new line (default for div, p, h1) */
}
.inline {
  display: inline;     /* Flows with text, no width/height (default for span, a) */
}
.inline-block {
  display: inline-block; /* Flows inline, but accepts width/height */
}
.hidden {
  display: none;       /* Completely removed from layout */
}
.invisible {
  visibility: hidden;  /* Hidden but still takes up space */
}
CSS on a sample page
/* The centering problems and solutions */

/* Center block element horizontally */
.centered-block {
  width: 500px;
  margin: 0 auto;    /* auto left+right = equal margins = centered */
}

/* Center with Flexbox (see next lesson) */
.center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Overflow */
.overflow-demo {
  width: 200px;
  height: 100px;
  overflow: hidden;   /* clip overflow */
  overflow: scroll;   /* always show scrollbar */
  overflow: auto;     /* scrollbar only when needed */
  overflow-x: auto;   /* horizontal only */
}

/* Position */
.positioned {
  position: static;    /* default — in document flow */
  position: relative;  /* offset from its normal position */
  position: absolute;  /* removed from flow, positioned relative to nearest non-static ancestor */
  position: fixed;     /* relative to viewport, stays while scrolling */
  position: sticky;    /* relative until it hits a threshold, then fixed */
  top: 10px;
  left: 20px;
  z-index: 10;         /* stack order (higher = on top) */
}
CSS on a sample page

Common question

Does setting width decide how wide an element will be?

Every element is a rectangle built in layers: content, then padding, then border, then margin. Backgrounds cover the content and padding; borders sit at the edge; margins push neighbours away. Whether width means just the content or content plus padding and border depends on box-sizing, and border-box is almost always the sensible choice.

box-sizing: border-box once at the top of your stylesheet, use padding for space inside a component and margin for space between components, and remember that neighbouring vertical margins collapse. With those three rules, layout maths stops surprising you.

Source: The CSS box model says every element is a box of content, padding, border and margin. All of layout builds on that.

Common mix-ups

Each of these sounds reasonable. Think about why it is wrong, then open the explanation.

  • width: 300px means the element takes up 300 pixels.

  • Margin and padding are two names for spacing and can be swapped freely.

  • A block element with no width only takes as much space as its content.

Finished reading?Mark it done to track your progress.

Tip: use the ← and → keys to move between lessons.