Adjust margin, border, padding, and content dimensions in real time. The diagram updates instantly — just like Chrome DevTools — and the ready-to-copy CSS output updates alongside it.

Settings

Presets
box-sizing
Content
Padding
Border
Margin

Box Model Diagram

margin
border
padding
200 × 100 content
—
Total width (px)
—
Total height (px)

Generated CSS

How to Use

  1. Choose a preset — Card, Button, Input, or Container loads sensible defaults instantly.
  2. Adjust values — Each area (margin, border, padding, content) has independent top/right/bottom/left fields. Enable Link sides to keep all four sides equal.
  3. Toggle box-sizing — Switch between content-box and border-box to see how the computed total changes.
  4. Read the diagram — Colors match Chrome DevTools: orange = margin, yellow = border, green = padding, blue = content.
  5. Copy CSS — Hit Copy CSS and paste directly into your stylesheet.

Understanding the CSS Box Model

Every HTML element is a rectangular box made of four concentric layers:

LayerColorDescription
ContentBlueWhere text and child elements live. Set by width / height.
PaddingGreenSpace between content and border. Background color fills this area.
BorderYellowThe visible edge of the element. Can have width, style, and color.
MarginOrangeInvisible space outside the border. Separates elements from each other.

content-box vs border-box

With content-box (the CSS default) width refers to the content area only — padding and border are added on top. With border-box width includes content, padding, and border, making layouts far more predictable. Most modern projects use box-sizing: border-box globally.

*, *::before, *::after {
box-sizing: border-box;
}

Margin shorthand reference

SyntaxMeaning
margin: 16pxAll four sides = 16 px
margin: 8px 16pxTop/Bottom = 8 px, Left/Right = 16 px
margin: 8px 16px 24pxTop = 8, Left/Right = 16, Bottom = 24
margin: 8px 12px 16px 20pxTop / Right / Bottom / Left