What exactly is the CSS box model?

Every element on a page is a rectangle composed of four layers: content, padding, border, and margin. The box model describes how these interact to produce the element's final size and spacing.

Does CSSpeek distinguish content-box from border-box?

Yes. CSSpeek reports the computed box-sizing value alongside width and height, so you always know whether padding and border are included in the reported dimensions.

Can I copy a single dimension value?

Yes. Every numeric value in the panel is individually copyable. Click a value to copy it to your clipboard.

Does it work on elements with transforms or scaled parents?

CSSpeek reads the element's layout box as the browser computes it. Transforms affect visual rendering but not the layout box, so reported values reflect the true layout.

Box model, without the headache.

Width, height, padding, and margin laid out the way the CSS spec draws them — with real numbers you can copy.

Add to Chrome — Free

margin 0 0 24px 0

padding 0

896 × 144

content

Width: 896
Height: 144
Display: block
Font size: 72px

Live-style panel showing the inspected element

What CSSpeek shows you

For any element you click, CSSpeek reports the content dimensions, padding, border, and margin. Here's the output for a typical hero heading:

Width: 896
Height: 144
Padding: 0px 0px 0px 0px
Margin: 0px 0px 24px 0px
Display: block

Understanding what you're looking at

The box model is one of CSS's foundational ideas, and also one of the quietly confusing ones. Every element is a rectangle with four concentric layers:

Content. The innermost box. Its dimensions are what width and height refer to (unlessbox-sizing says otherwise).
Padding. Space between the content and the border. Padding is inside the element and inherits the background color.
Border. A visible line around padding. Contributes to the final rendered size.
Margin. Space outside the border that pushes other elements away. Margins can collapse between siblings.

content-box vs border-box

By default, CSS uses box-sizing: content-box, meaning width and height apply to the content box only. Most modern stylesheets set box-sizing: border-box so that width and height include padding and border — saving you from the infamous "why is my 50% + 50% layout overflowing" headache.

CSSpeek always reports the computed box-sizing value, so you know exactly which model is in play for the inspected element.

When the box model view earns its keep

Debugging unexpected gaps between sections when a margin value isn't obvious from the source.
Verifying a design spec matches production — "should be 24px margin-bottom" is now a one-click check.
Writing precise bug reports. Instead of "the padding is wrong," paste the actual values into the ticket.
Reading competitor layouts to understand how their design system scales.

Copying values

Every field in the panel is click-to-copy. Paste a padding quartet directly into your stylesheet, or copy width and height for use in a bug-report attachment. No manual retyping of decimals.

Box model: frequently asked questions

What exactly is the CSS box model?: Every element on a page is a rectangle composed of four layers: content, padding, border, and margin. The box model describes how these interact to produce the element's final size and spacing.
Does CSSpeek distinguish content-box from border-box?: Yes. CSSpeek reports the computed box-sizing value alongside width and height, so you always know whether padding and border are included in the reported dimensions.
Can I copy a single dimension value?: Yes. Every numeric value in the panel is individually copyable. Click a value to copy it to your clipboard.
Does it work on elements with transforms or scaled parents?: CSSpeek reads the element's layout box as the browser computes it. Transforms affect visual rendering but not the layout box, so reported values reflect the true layout.