Spacing & Box Model Generator
Visual CSS spacing generator. Adjust margin, padding, and box sizes. Understand the box model visually.
Margin
Padding
Content
100x100
Margin (Outer)
Padding (Inner)
Content Size
100pxCSS Output
.box {
/* Margin */
margin: 20px;
/* Padding */
padding: 20px;
/* Border for visualization */
border: 1px solid currentColor;
}Tailwind / Inline
<!-- Tailwind Classes -->
<div class="m-[20px] p-[20px] border border-current">
Content
</div>Features
- Visual Margin vs Padding explorer
- Box Model visualization
- Interactive sizing controls
- Generate standard spacing utility classes
- REM/PX conversion toggle
- Border-box explanation
Common Use Cases
- Understand the CSS Box Model
- Generate consistent spacing scales
- Debug layout spacing issues
- Create spacing utility systems (Tailwind-like)
- Visualize negative margins
The Box Model & Spacing
In CSS, every element is a box. The Box Model describes the layers of that box:
- Content: The actual text or image.
- Padding: Space inside the border, pushing content inward. Background fills this.
- Border: The line around the padding.
- Margin: Space outside the border, pushing other elements away. Transparent.
Box Sizing: Automatically set box-sizing: border-box;. This makes width = padding + border + content, which is much more intuitive.
Examples
Valid - Global Reset
*, *::before, *::after {
box-sizing: border-box;
} Valid - Center Block
margin-left: auto;
margin-right: auto;
width: 50%; Valid - Negative Margin
margin-top: -20px; /* Pulls element up */Frequently Asked Questions
Margin vs Padding?
Use Padding for internal space (background color applies). Use Margin for external space (distance between elements). "Padding makes me fat, Margin gives me personal space."
Why do my margins collapse?
Vertical margins of adjacent block elements often combine into the largest single margin value. This is "Margin Collapsing". Adding a border or padding to the parent prevents it.
Why use REM?
REM is relative to the root font size (usually 16px). This ensures your entire layout scales respectfully if a user changes their browser's default font size for accessibility.
💡 Tips
- Stick to a spacing scale (4, 8, 16, 24, 32px) to keep your UI consistent.
- Use <code>gap</code> in Flexbox/Grid instead of margins to avoid "last-child" margin issues.