What is a pixel?

Every CSS property like 'padding-top' has a value definition field which defines the valid values for that CSS property. For example, The value definition field of 'padding-top' is <length> | <percentage> which simply means the value for 'padding-top' can be a length or percentage but what's a length? And what's a percentage?

<length> and <percentage> are basic data types that designate the type of component value in a value definition field.

The data type in the CSS grammar

CSS defines a <length> (which corresponds to a DIMENSION token in the grammer) as a <number> followed by a unit identifier.

DIMENSION {num}{ident}

A <number> is either an <integer> or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits.

NUMBER {num}
num [0-9]+|[0-9]*\.[0-9]+

An identifier is sequence of characters conforming to the IDENT token.

IDENT {ident}
ident [-]?{nmstart}{nmchar}*
nmstart [_a-z]|{nonascii}|{escape}
nmchar [_a-z0-9-]|{nonascii}|{escape}
nonascii [^\0-\237]
escape {unicode}|\\[^\n\r\f0-9a-f]
unicode \\[0-9a-f]{1,6}(\r\n|[ \n\r\t\f])?

So when you write 12px as a property value, 12 is a <number> and px is a unit identifier. Together, they're a DIMENSION or <length>.

The types of units

There are two types of units: relative and absolute. Relative units are lengths specified relative to another length such as the computed font size of the element or the viewport's width. Absolute units are fixed in relation to each other and anchored to some physical measurement. We are not concerned with relative units here since the pixel is an absolute unit.

The absolute units are all physical units except the px unit.

One of these units is going to be declared as an anchor unit and all other units are anchored to it but which one? First, you have to note that pixel unit and the physical units are related by a fixed ratio under the assumption of 96dpi since too much existing content rely on that assumption. That is, the px unit is only a physical unit under the assumption of 96dpi. This gives rise to the 'reference pixel'.

The reference pixel

The reference pixel is the visual angle of 1 device px with 96 dpi and a distance from the reader of an arm's length (where a nominal arm's length is 28 in).

Ref px = tan-1[Physical measurement of 1 device px / Arm's length] = tan-1[(1/96)/28] = 0.0213 deg

Which unit should the other units be anchored to?

For high resolution devices (e.g. printers) where more dots or device pixels are needed to cover the reference pixel, the anchor unit should be a physical unit (e.g. in) since if it was the px unit then the physical units might not match their physical measurements.

Example 1 For simplicity, assume 2 dots are needed to cover a reference pixel (so it's a 192dpi device) and that a device pixel is 0.1 in the physical world.

1 ref px = 2 device px = 0.2 in

So to cover a 1 in x 1 in area, you would need to draw 96 x 96 reference pixels or 192 x 192 device pixels but wait, a device pixel is 0.1 in so if we draw 192 device pixels we're drawing 19.2 in.

1 in = 96 ref px = 96 * 0.2 in = 19.2 in 

For low resolution devices (e.g. computer display), the anchor should be the px unit so that it refers to a whole number of device px.

Example 2 For simplicity assume the computer display has 96dpi so that 1 dot or device pixel is 1 reference pixel and that a device pixel is 0.1 in in the physical world.

1 device px = 0.1 in

So to cover a 1 in x 1 in area, you would need to draw 10 device px

10 device px = 1 in

But wait, now the reference pixel which is 1/96 in is equivalent to 1/96 * 10 device pixels which is not a whole number! You can't draw that.

1 ref px = (1/96) in = (10/96) device px