寸法測定
製図用の目盛りで、ブラウザー内の実際の幅と高さを読み取ります。
実際の境界寸法
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.
リファレンスの見本内
固定幅または可変幅を設定する
破線の輪郭は、記述した包含ブロックです。青いボーダーボックスの実際の幅を、親要素と見比べてください。
使用箇所： コンテナー寸法のリファレンス.
使い方とインターフェース
DemoMeasure は子要素を div.ui-measure で包みます。ラベルと実測した幅・高さの output を含む ui-measure-head、ui-measure-rule、測定対象のボックスで構成されます。ResizeObserver が測定値を最新に保ちます。
<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>レイアウトの親と項目の間にラッパーを挿入しないでください。親要素か、測定専用のラッパーを測ります。