an interactive toy

the box model

Every element on the web is four nested rectangles: content, wrapped in padding, wrapped in a border, wrapped in margin. Drag the sliders and watch them breathe.

margin

border

padding

160 × 100

width160px

height100px

padding20px

border8px

margin24px

.box {
  box-sizing: content-box;
  width:   160px;
  height:  100px;
  padding: 20px;
  border:  8px solid;
  margin:  24px;
}

rendered width
rendered height
total footprint (with margin)

contentThe box your text or image actually lives in. width and height size it — usually.

paddingBreathing room inside the border. It takes the element's background, and it pushes the edges out.

borderThe drawn edge itself. Has width and counts toward the box — a fact that bites until border-box.

marginEmpty space outside, holding other elements away. It never gets a background, and neighbours' margins collapse into one.

Flip to border-box and the width stops lying.
Now width means the whole box — padding and border included — and the content quietly makes room.