Design Tools

CSS Box Model Visualizer — Interactive Spacing

Adjust width, height, padding, border, and margin with a live box-model diagram. Compare content-box vs border-box occupancy and copy the matching CSS.

Quick switch→Flexbox Generator

CSSBox modelVisual

Quick switch:Flexbox Generator CSS Grid Generator CSS Unit Converter

Favorite this tool

No favorite storage mode has been selected.

Quick actions

Back to Design Tools Browse all tools

Copy this tool URL or open the system share sheet on a supported device.

Use cases

Compare content-box and border-box sizing
Confirm how padding and margin affect layout space
Use as a teaching aid for CSS layout basics

How to use

Adjust the numeric controls
Inspect the visual layers and totals
Copy the generated CSS

Example input and output

Input

width:200px padding:20px border:2px margin:24px

Total width

292px (content-box)

FAQ

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

In content-box, width/height cover the content only. In border-box, width/height include content, padding, and border.

Tools

Related tools

Continue with another translated tool for a nearby task.

Flexbox Generator

Flexbox Generator — Visual One-Dimensional Layout

Available

Tune flex-direction, justify-content, align-items, wrap, and gap with a live preview. Add or remove boxes to see wrapping and spacing, then copy the generated CSS (and HTML scaffold) into your project.

Design CSS Layout

Open tool

CSS Grid Generator

CSS Grid Generator — Rows, Columns, and Gaps

Available

Set column and row counts plus gaps to generate a basic display:grid layout. Preview the track structure, try quick templates, and copy CSS or HTML for admin layouts and card grids.

CSS Grid Layout

Open tool

CSS Unit Converter

CSS Unit Converter — px, rem, em, vw

Available

Convert among px, rem, em, pt, vw, vh, and %. Customize root font size, parent font size, and viewport size for responsive work and design-to-code handoff.

CSS Units Conversion

Open tool