Absolute units (px)

A box styled with width: 300px covers 300 physical dots on a standard monitor and 600 dots on a high-density laptop screen, yet it looks about the same size on both. The reason is that a CSS pixel is not a dot on the screen. It is a fixed unit of length that the browser maps onto however many dots the screen needs. This chapter follows one recipe card through the three families of CSS units, starting with the pixel.

A unit whose size does not depend on any other element, font or window size is called an absolute unit. The pixel, written `px