All tools

CSS Box Model Visualizer

Live preview of margin / border / padding / content.

Content

Padding

TopRightBottomLeft

Border

TopRightBottomLeft

Margin

TopRightBottomLeft
margin
border
padding
content 200×120

Total occupied: 276 × 196 px

CSS
width: 200px;
height: 120px;
padding: 16px 16px 16px 16px;
border: 2px solid #000;
margin: 20px 20px 20px 20px;
/* total: 276 × 196 px */

Default content-box sizing. Total width = content + padding + border + margin. Setting box-sizing: border-box (the modern default in most resets) makes width include padding and border, which is usually what you want.

About

Adjust each side of margin, border, and padding. The preview shows the nested boxes in distinct colors. Total occupied space is reported in px.

How to use

  1. Tweak each side.
  2. Copy the CSS.

FAQ

Content-box vs border-box?+

Default content-box: width = content only. Border-box: width = content + padding + border. Most modern resets set box-sizing: border-box because it's more predictable.