CSS Box Model Calculator
The CSS box model defines each element as a rectangle with 4 layers: content (innermost), padding, border, and margin (outermost). Total width = margin-left + border-left + padding-left + content-width + padding-right + border-right + margin-right. With box-sizing: content-box (default), width = content only. With box-sizing: border-box, width includes padding + border. offsetWidth (JavaScript) = content + padding + border. Margins can collapse vertically between adjacent elements.
Calculate CSS box model dimensions. Enter content width/height, margin, border, and padding values to see offset size, total size with margin, and full breakdown. Supports content-box and border-box sizing. Visual diagram and CSS output included.
box-sizing
content-box: width/height applies to content only. border-box: width/height includes padding + border.
Content
Spacing
Margin (outside element)
Border (element edge)
Padding (inside element)
Presets
Calculated Sizes
Visual Diagram
Width breakdown
CSS Output
/* box-sizing: content-box */ margin: 0px 0px 0px 0px; border: 0px 0px 0px 0px solid; padding: 0px 0px 0px 0px; width: 200px; height: 100px; box-sizing: content-box; /* Total offset: 200px × 100px */ /* Total with margin: 200px × 100px */
CSS Box Model Reference
| Property | Description |
|---|---|
| content | The actual content area (text, images, child elements) |
| padding | Space inside the border, between content and border. Has element's background. |
| border | The visible edge around padding. Can have width, style, color. |
| margin | Space outside the border. Transparent, separates element from others. |
| box-sizing: content-box | Default. width/height = content only. Adds padding+border to total size. |
| box-sizing: border-box | width/height includes padding+border. More predictable layouts. |
| offsetWidth | content + padding + border (no margin). Used by JavaScript. |
| scrollWidth | Total scrollable content width including overflow. |
| clientWidth | content + padding (no border, no scrollbar). |
How to Use
- 1
Set box-sizing
Choose content-box (default: width is content only) or border-box (width includes padding and border). border-box is recommended for predictable layouts.
- 2
Enter content dimensions
Set the width and height of the content area in pixels.
- 3
Set spacing values
Enter top/right/bottom/left values for margin, border, and padding. Use the preset buttons (Button, Card, Input, Navbar) for quick starting points.
- 4
Review calculated sizes
See the offset size (content + padding + border) and total size including margin. The visual diagram and width breakdown show exactly how each layer contributes.
Frequently Asked Questions
- What is the CSS box model?
- The CSS box model defines how every HTML element is rendered as a rectangular box with four layers: content (text, images), padding (space between content and border), border (visible edge around the element), and margin (transparent space separating the element from others). The total space an element occupies in the layout is: total width = margin-left + border-left + padding-left + content width + padding-right + border-right + margin-right. Understanding the box model is essential for predictable CSS layout.
- What is the difference between content-box and border-box?
- content-box (default): width and height apply only to the content area. Padding and border are added on top. Example: a div with width: 200px and padding: 20px has an offsetWidth of 240px. border-box: width and height include padding and border. Example: a div with width: 200px, padding: 20px, and border: 1px has an offsetWidth of exactly 200px — the content shrinks to 158px. Most modern CSS resets use * { box-sizing: border-box } because border-box is more predictable and avoids unexpected size overflows.
- What is the difference between offsetWidth, clientWidth, and scrollWidth?
- These are JavaScript properties that measure element dimensions: offsetWidth = content + padding + border (the rendered border-box size, what you see on screen). clientWidth = content + padding (excludes border and scrollbar). scrollWidth = full content width including overflow that extends beyond the visible area. Similar for Height versions. Use offsetWidth to get the visual size of an element. Use clientWidth for the inner usable area. Use scrollWidth to check if content overflows. All exclude margin since margin is outside the element.
- Do margins collapse in CSS?
- Yes — vertical margins between block elements collapse (merge) into a single margin equal to the larger of the two. Example: a paragraph with margin-bottom: 20px followed by a paragraph with margin-top: 30px results in 30px of space, not 50px. Margin collapse happens between: adjacent siblings, parent and first/last child (if no border/padding separates them), and empty elements with top and bottom margins. Margin collapse does NOT happen for: inline elements, flex/grid children, elements with overflow other than visible, floated elements, or horizontal (left/right) margins.
- Why does padding increase element size unexpectedly?
- With the default box-sizing: content-box, adding padding increases the rendered size beyond the specified width. Example: width: 100% and padding: 20px means the element is 100% + 40px wide, causing overflow. Fix: use box-sizing: border-box so padding is included in the specified width. The universal box-sizing reset: *, *::before, *::after { box-sizing: border-box } is recommended for all projects. Alternatively, use calc(): width: calc(100% - 40px) to subtract the padding from the width.
- What is the difference between padding and margin?
- Padding is inside the element — the space between the content and the border. It has the element's background color/image. Clicking inside padding still triggers click events on the element. Padding cannot be negative. Margin is outside the element — transparent space that pushes other elements away. It shows the parent's background. Clicking in the margin does NOT trigger the element's click events. Margins can be negative (to pull elements closer). Use padding to add breathing room inside an element, margin to create space between elements.