Measure
A hairline with end dots and the browser’s own reading above it. The wrapper measures; it never joins the layout it measures.
Live bounds
Content bounds
Content bounds
Collection panel
The subject stays inside its measured boundary.
The rule reports the actual rendered box. At narrow widths, the available space can be less than the requested width.
In a reference specimen
Set a fixed or fluid width
The dashed outline is the authored containing block. Read the actual blue border-box width alongside its parent.
Used on the container size reference.
Usage and interface
DemoMeasure wraps its children in div.ui-measure: a ui-measure-head with the label and an output of the measured width and height, a ui-measure-rule, and the measured box. A ResizeObserver keeps the reading current.
<DemoMeasure label="Content bounds"> <DemoSurface className="p-md">…</DemoSurface></DemoMeasure><div class="ui-measure"> <div class="ui-measure-head"><span>Content bounds</span><output>300 × 96 px</output></div> <div class="ui-measure-rule" aria-hidden="true"></div> <div>…</div></div>Never insert the wrapper between a layout parent and its items; measure the parent or a dedicated wrapper instead.