Inspecting the Box Model in DevTools

The Box Model diagram in the Elements/Inspector panel is the fastest way to answer "why is there unexpected space here" or "what is this element's actual rendered size." It shows content, padding, border, and margin as nested, color-coded rectangles with live numbers on each side — reading it correctly turns spacing bugs from guesswork into a two-second lookup.

A worked example: tracking down mystery spacing

Here is the full workflow applied to a realistic bug report: "there is too much space between the page header and the first card, but I cannot find where it comes from."

Select the first card element in the Elements panel and check its box model diagram — the top margin shows 0, so the space is not coming from the card itself
Select the header element instead — its bottom margin shows 40px, which looks larger than the design calls for
Open the Computed panel for the header, filter for "margin", and click the arrow next to margin-bottom to see which rule actually set it
The rule turns out to come from a shared .section + .section sibling-combinator rule that also matches the header unintentionally
Fix: scope the rule more precisely, or override it locally on the header with a smaller, deliberate margin

Why check both elements

Unexpected space between two elements can come from either side — the first element's bottom margin, the second element's top margin, or both (before margin collapse reduces it to the larger one). Checking only one side is the most common reason this kind of bug takes longer to find than it should.

Where to find it

Open DevTools and select an element (right-click → Inspect, or the element-picker icon)
Open the Styles/Layout sidebar tab next to the Styles pane
Scroll to the bottom of the Styles pane (Chrome/Edge) or the dedicated "Layout" section (Firefox) to find the box model diagram

Reading the diagram

Layer (outside in)	Color (Chrome default)	What it represents
Margin	Orange/yellow	Space outside the border, between this element and its neighbors
Border	Yellow/tan	The border line itself, part of the box if `box-sizing: border-box`
Padding	Green	Space inside the border, before the actual content starts
Content	Blue	The actual content box — where text/children render

The numbers on each side

Each rectangle shows up to four numbers (top, right, bottom, left) for that layer. A single centered number means all four sides are equal; four separate numbers around the edges mean they differ.

Live-editing values

Every number in the box model diagram is directly editable — double-click it, type a new value, and press Enter to see the layout update instantly, without touching the actual stylesheet. This is the fastest way to test "what if this padding were 8px larger" without a single file edit.

Double-click any margin/border/padding number to edit it in place
Changes are temporary (reset on reload) — copy the working value into your actual CSS once you find it
Combine this with the Styles pane above it: editing a value there updates the diagram live too, and vice versa

Great for finding a good spacing value fast

Rather than editing a CSS file, reloading, and eyeballing the result repeatedly, drag or type values directly in the box model diagram until the spacing looks right, then copy that final number back into your source file once.

Verifying box-sizing

The single most common box-model confusion is forgetting whether an element uses content-box (the CSS default) or border-box. The Computed panel settles it immediately.

CSS

.card {
  width: 300px;
  padding: 20px;
  border: 2px solid black;
}

/* content-box (default): rendered width = 300 + 40 + 4 = 344px
   border-box: rendered width = 300px, padding/border eat into it */

Select the element in the Elements panel
Open the Computed panel (next to Styles)
Search "box-sizing" in the filter box at the top
Compare the reported value against the width shown at the top of the box model diagram to confirm which model is in effect

Finding unexpected spacing

When a gap looks wrong, the box model diagram tells you immediately which layer is responsible — a wide gap between elements is almost always margin, while unexpected space between the border and the text content is padding.

Where the extra space appears	Likely layer
Between two separate elements	Margin (check both elements — margins can collapse)
Between an element's border and its own text/children	Padding
Around an element even with margin: 0 and padding: 0 set	An ancestor's padding, or a pseudo-element (`::before`/`::after`) you forgot about

Margin collapse hides in the diagram too

If two stacked elements each have vertical margins, the box model diagram for each individually shows its own full margin value — it will not visually warn you that the actual gap between them is smaller due to margin collapse. Select each element in turn and compare their positions, or use the ruler/measuring tools, to catch this.

Negative margins in the diagram

A negative margin pulls an element closer to (or past) its neighbors, and the box model diagram represents this by drawing the margin rectangle overlapping the content box rather than surrounding it. It looks unusual the first time you see it, but it is the same diagram, just with the margin value negative.

CSS

.overlap {
  margin-top: -20px; /* pulls the element upward, overlapping its
                         previous sibling by 20px */
}

Reading negative values at a glance

In the box model diagram, a negative margin is usually rendered with the margin band drawn *inward*, crossing into the border/padding area, instead of extending outward. If the numbers on the diagram show a minus sign, that confirms it — do not assume a small visible gap means the margin is positive.

Comparing box-sizing across two elements

A frequent real bug: two elements meant to be the same width render differently because one uses content-box and the other border-box. Selecting each in turn and comparing their Computed width side-by-side settles it in seconds.

Element	width (declared)	box-sizing	Rendered width
`.card-a`	300px	content-box (default)	300 + padding + border
`.card-b`	300px	border-box	300px exactly

Fastest fix

If two same-width elements render differently and both declare the same width, check box-sizing in the Computed panel for each before looking anywhere else — it is the single most common cause of this exact symptom.

The ruler / measuring tools

Chrome and Firefox both let you hover over an element to see live pixel distances to nearby elements, without opening the full box model diagram
Firefox's "Measure a portion of the page" tool (in the DevTools toolbar) draws an on-page ruler for arbitrary distances, useful for confirming spacing against a design mockup
Holding a modifier key while hovering (varies by browser/version) shows distances from the hovered element to its containing block edges directly on the page

Chrome vs Firefox naming differences

The underlying concept is identical in both browsers, but the panel names and locations differ slightly, which trips people up when switching between them.

Concept	Chrome / Edge	Firefox
Box model diagram location	Bottom of the Styles pane, or the dedicated "Layout" tab	Dedicated "Layout" panel, "Box Model" section
Resolved final values	"Computed" tab	"Computed" tab (same name)
Flex/grid overlay controls	"Layout" tab, same panel as box model	"Layout" panel, separate Flexbox/Grid sections

Cross-checking with getComputedStyle in the console

The Elements panel is the visual tool, but the DevTools console gives you the same numbers programmatically — useful for comparing many elements at once, or for pasting exact values into a bug report.

CSS

/* Run in the DevTools console, with an element selected via $0 */
const style = getComputedStyle($0);

console.log({
  width: style.width,
  boxSizing: style.boxSizing,
  padding: style.padding,
  margin: style.margin,
  border: style.borderWidth,
});

$0 refers to the currently selected element

After clicking an element in the Elements panel, switch to the Console tab and reference it with $0 — DevTools always keeps this bound to whatever is currently selected in the Elements panel, so you can run arbitrary JavaScript against it without re-selecting it with a query selector.

Properties that are easy to confuse

Property	Common confusion
`margin` vs `padding`	Margin is outside the border (space between elements); padding is inside it (space before content)
`border-box` vs `content-box`	Whether `width`/`height` include padding and border, or exclude them
`outline` vs `border`	`outline` does not take up box-model space at all and can overlap neighboring elements — it never appears in the box model diagram
`gap` vs `margin`	`gap` (flex/grid) never collapses and only applies between items, never around the container edge

Box model checklist for a spacing bug

Select both elements bordering the unexpected gap, not just one — the space can come from either side, or both via margin collapse
Confirm box-sizing in the Computed panel before assuming a width value is wrong
Use the Computed panel's "show which rule set this" arrow instead of scanning the whole Styles pane by eye
Watch for negative margins drawn inward in the diagram — they are easy to misread as zero at a glance
Live-edit values directly in the diagram to find the right number before writing it back into your stylesheet

See how the same panel exposes flex and grid structure in Debugging Flexbox & Grid in DevTools.