CSS Fundamentals: The Box Model, Specificity, Positioning, and Layout

The Box Model

Every element renders as a rectangle built from four layers, from the inside out:

• Content — the actual text, image, or children
• Padding — space inside the border, part of the element's own background
• Border — the edge itself, drawn between padding and margin
• Margin — space outside the border, between this element and its neighbors, and always transparent

Two elements can look identical but behave completely differently once you resize the page, purely because of how their width/height interact with padding and border — which is exactly what box-sizing controls.

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

Nothing about this rule says how wide .card actually renders on screen — that depends entirely on box-sizing, covered next.