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

Part 2 of 18 · ~1 min

The Box Model

Every element on the page — the card, the image inside it, the button at the bottom — is, underneath everything else, a rectangle assembled out of four stacked layers, innermost first:

• Content — the image, the text, whatever's actually inside
• Padding — cushion between the content and the border, painted in whatever background color the element itself has
• Border — the visible edge, sitting right between the padding and the margin
• Margin — the buffer beyond the border that keeps this box clear of its neighbors, and it never paints anything

Look again at the card's two rules from the intro:

.card {
  width: 260px;
  padding: 16px;
  border: 1px solid #ddd;
}

That width: 260px line looks like a complete answer, but it's only half of one — the browser still has to decide whether 260px describes the content area by itself, or the whole box once padding and border are stacked on top of it. Which reading wins has a name, covered next, and it matters here for a concrete reason: the category page drops this card into a grid with columns sized to exactly 260px, and the gap between those two readings of width is about to shove the third card in every row onto a line of its own.