Introduction to the Box Model in CSS

A product card declared width: 300px covers 340 pixels of the page, and it keeps another 20 pixels clear on each side. Both numbers come from one rule that the browser applies to every element: each element is drawn as a rectangular box made of four layers. That rule is called the CSS box model, and it is how the browser works out the size and position of everything on a page.

The previous chapter treated width, height, margin and padding one at a time. This page puts them together on one card, with a thicker 4-pixel border so that each layer is easy to see.

<!DOCTYPE html>