Visualize the CSS Box Model

Name: Visualize the CSS Box Model
Author: Kitmul

Interactively visualize the CSS box model with live padding, border, margin, and content editing.

Interactively visualize the CSS box model with live editing of padding, border, margin, and content dimensions. Toggle between content-box and border-box sizing to see how dimensions change. Use preset layouts for cards, buttons, and hero sections. See computed sizes at every layer, preview the real element, and copy the generated CSS. Everything runs in your browser with zero server calls.

Presets:

box-sizing:

Content Padding Border Margin

Content (content-box)

Width: Height:

Padding

Top: Right: Bottom: Left:

Border

Top: Right: Bottom: Left:

Margin

Top: Right: Bottom: Left:

Computed Dimensions

Content: 200 x 150

With Padding: 240 x 190

With Border: 244 x 194

Total: 264 x 214

Live Preview

200x150

CSS

box-sizing: content-box;
width: 200px;
height: 150px;
padding: 20px;
border: 2px solid #333;
margin: 10px;

Your data stays in your browser

Was this tool useful?

Rate this tool

Tutorial

How to Use

Adjust Values

Edit padding, border, margin, and content dimensions using the number inputs. The SVG diagram updates in real time.

Toggle Box Sizing

Switch between content-box and border-box to see how width and height are interpreted differently by each model.

Copy and Use

Review computed dimensions at each layer, check the live preview, and copy the generated CSS directly into your project.

Guide

Complete Guide to the CSS Box Model

The Four Layers

Every element has content (the text or child elements), padding (transparent space inside the border), border (a visible edge), and margin (transparent space outside the border). Understanding these layers is essential for CSS layout.

Content-Box vs Border-Box

The default content-box model means width and height apply only to the content area. Border-box includes padding and border in the declared width and height, which is generally more intuitive for layout work.

Margin Collapse

Adjacent vertical margins of block-level elements collapse: only the larger margin applies. This behavior surprises many developers. Padding, border, inline elements, and flexbox containers prevent collapsing.

Box Model in Flexbox and Grid

In flexbox and grid layouts, the box model still applies to each item. The flex or grid container controls item placement while each item's box model determines its internal dimensions and spacing.

Sources

Examples

Worked Examples

Example: Content-Box Total Width

Given: width 200px, padding 20px each side, border 2px each side, margin 10px each side, box-sizing content-box.

Step 1: Content width = 200px (declared width).

Step 2: Add padding: 200 + 20 + 20 = 240px.

Step 3: Add border: 240 + 2 + 2 = 244px.

Step 4: Add margin: 244 + 10 + 10 = 264px total space.

Result: The element renders at 244px wide and occupies 264px total horizontal space.

Example: Border-Box Comparison

Same values but with box-sizing border-box.

Step 1: Declared width 200px now includes padding and border.

Step 2: Content width = 200 - 20 - 20 - 2 - 2 = 156px.

Step 3: Rendered width stays at 200px (padding and border are inside).

Step 4: Add margin: 200 + 10 + 10 = 220px total space.

Result: Border-box makes the element 200px wide regardless of padding and border. Total space is 220px.

Use Cases

Learn Box Model Basics

“New to CSS? Edit each layer and watch the diagram change to build an intuitive understanding of how content, padding, border, and margin interact to form element dimensions.”

Debug Layout Issues

“Paste your current CSS values into the tool to see the total space an element occupies. Toggle box-sizing to understand why your element is wider than expected.”

Prototype Component Spacing

“Use presets like Card or Button as starting points, then tweak padding and margin values until the spacing looks right. Copy the CSS directly into your stylesheet.”

Frequently Asked Questions

?What is the CSS box model?

Every HTML element is a rectangular box with four layers: content, padding, border, and margin. The box model defines how these layers combine to determine the element's total size.

?What is the difference between content-box and border-box?

In content-box, width and height set the content area only. In border-box, width and height include padding and border, making layout calculations simpler.

?Which box-sizing should I use?

Most modern CSS resets use border-box for all elements. It makes responsive layouts easier because percentage widths include padding and border.

?Does margin affect element size?

No. Margin creates space outside the border and does not change the element's rendered size. However, it affects the total space the element occupies in the layout.

?What is margin collapse?

When two vertical margins meet, they collapse into a single margin equal to the larger of the two. This only happens vertically and only with block-level elements.

?Is my data private when using this tool?

Completely. All calculations and rendering happen in your browser. No data is sent to any server.

?Is this tool free to use?

Yes. Fully free with no sign-up, no limits, and no ads.

?Can I use negative margins?

The visualizer uses non-negative values for clarity. In real CSS, negative margins are valid and pull elements closer or overlap them.

Help us improve

How do you like this tool?

Every tool on Kitmul is built from real user requests. Your rating and suggestions help us fix bugs, add missing features and build the tools you actually need.

Related Tools

Abstract Syntax Tree (AST) Visualizer

Visualize the structure of your JavaScript code with a detailed AST tree.

Try Tool

Big Data Text Visualizer

Efficiently visualize and search through extremely large text files using buffering and infinite scroll.

Try Tool

Visualize Pathfinding Algorithms

Visualize A*, Dijkstra, BFS, and DFS pathfinding algorithms step by step on an interactive grid.

Try Tool

Recommended Books on CSS and Web Design

Boost Your Capabilities

Visualize the CSS Box Model

Content (content-box)

Padding

Border

Margin

Computed Dimensions

Live Preview

CSS

How to Use

Adjust Values

Toggle Box Sizing

Copy and Use

Complete Guide to the CSS Box Model

The Four Layers

Content-Box vs Border-Box

Margin Collapse

Box Model in Flexbox and Grid

Worked Examples

Example: Content-Box Total Width

Example: Border-Box Comparison

Use Cases

Learn Box Model Basics

Debug Layout Issues

Prototype Component Spacing

Frequently Asked Questions

?What is the CSS box model?

?What is the difference between content-box and border-box?

?Which box-sizing should I use?

?Does margin affect element size?

?What is margin collapse?

?Is my data private when using this tool?

?Is this tool free to use?

?Can I use negative margins?

How do you like this tool?

Related Tools

Abstract Syntax Tree (AST) Visualizer

Big Data Text Visualizer

Visualize Pathfinding Algorithms

Recommended Books on CSS and Web Design

CSS: The Definitive Guide

CSS in Depth

CSS: The Definitive Guide (4th Edition)

Recommended Products for Web Development

MX Master 3S Wireless Performance Mouse with Ultra-Fast Scrolling

K2 Pro Wireless Mechanical Keyboard for Developers, 75% Layout

Portable USB-C Monitor 15.6 inch FHD 1080P for Dual Screen Setup

Get Free Productivity Tips & New Tools First

Content (content-box)

Padding

Border

Margin

Computed Dimensions

Live Preview

CSS