The box model

Four layers of every box

• Content: the text or image itself.
• Padding: space inside the box, between content and border. It takes the background colour.
• Border: a line around the padding.
• Margin: space outside the border that pushes other boxes away. It is always transparent.

.card {
  width: 300px;
  padding: 16px;          /* all four sides */
  border: 2px solid #ddd;
  margin: 24px auto;      /* 24px top and bottom, centred left-right */
}
/* Shorthand order: top right bottom left (clockwise) */
.note { padding: 8px 16px 8px 16px; }

box-sizing: the width surprise

By default (content-box), width means only the content. Padding and border are added on top: 300px + 2 x 16px + 2 x 2px = 336px wide. With box-sizing: border-box, width includes padding and border, so the card is exactly 300px. Almost every project sets this for all elements.

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

display: how boxes sit

Width, max-width and centring

width: 100% fills the parent. max-width stops a box from growing too wide on big screens while letting it shrink on phones. A block with a max-width and margin-inline: auto (or margin: 0 auto) sits in the centre.

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px;
}

Margin collapsing and overflow

When two block boxes sit one above the other, their vertical margins do not add up; the bigger one wins. This is called margin collapsing. And when content is bigger than its box, overflow decides what happens: visible (spills out), hidden (cut off), or auto (scroll bar when needed).