Interactive CSS Box Model

Every element on a web page is a box. Drag the sliders and watch how content, padding, border and margin stack up — and why a 200px box is often not 200px wide.

Read the CSS Box Model lesson

Try these:

box-sizing

width sets the content only — padding and border are added on top.

Size

Width220pxHeight140px

Padding + Margin Unit

Padding

All20px

Border

All8px

StyleColour

Margin

All24px

Corner radius

Top left8pxTop right8pxBottom right8pxBottom left8px

Content

TextFont size16px

Margin

Content

Hover or tap a layer to learn what it does.

The maths

Total width: 0px
Total height: 0px
Space taken on the page (with margin): 0 × 0px

content 220px

+ padding 20+20px

+ border 8+8px

= 0px

Generated CSS

.box {
  width: 220px;
  height: 140px;
  padding: 20px;
  border-width: 8px;
  border-style: solid;
  border-color: #f59e0b;
  border-radius: 8px;
  margin: 24px;
  font-size: 16px;
}