= CSS pixel
{c}
{title2=$\mathrm{px}$}
A <CSS pixel>, written `px`, is a unit of <length> in <CSS> layout. Its reference definition concerns a visual angle, while the specification fixes the ratios between <CSS> absolute length units:
$$
96\,\mathrm{px}=1\,\mathrm{in}=2.54\,\mathrm{cm}
$$
within the <CSS> unit system. The browser can anchor these units to physical measurements or to a reference pixel appropriate to the output medium. Consequently, a <CSS pixel> does not necessarily equal one physical display <pixel>.<CSS Values and Units Module Level 3 by World Wide Web Consortium>[§5.2, Absolute Lengths, unit table, anchoring rules and reference-pixel definition]{ref}
For example, a box with `width: 100px` has a declared width of 100 <CSS pixels>. On a display mapping two device pixels to each <CSS pixel> along each axis, that width spans 200 device pixels before any additional transforms. A square of side 100 <CSS pixels> spans a $200\times200$ device-pixel region in that simple mapping. The <device pixel ratio> connects these two coordinate scales.
The fixed ratio `96px = 1in` does not measure a monitor's physical <pixel density>. A browser's on-screen `1in` can differ from a measured physical <inch> when the reference-pixel anchor is used. <Page zoom> can also change the physical size of the layout's <CSS pixels>, even though the declared number `100px` remains the same.<CSSOM View Module by World Wide Web Consortium>[§2.2, page zoom; Window.devicePixelRatio algorithm, CSS pixel size at current page zoom]{ref}
Back to article page
