Measurement Units

CSS supports a number of measurements including absolute units such as inches, centimeters, points, and so on, as well as relative measures such as percentages and em units. You need these values while specifying various measurements in your Style rules e.g. border="1px solid red".

Absolute Units

The absolute units of length are centimeter (cm), millimeter (mm), and inch (in). Although these units are meant to look the same regardless of the screen resolution, it is not always the case because web browsers do not always know the exact physical size of the display medium.

These units are mainly useful when the size of the output medium is known, such as for content that will be printed to paper. They are not recommended for screen displays since screen sizes can vary a lot.

Example:

p {
    font-size: 1cm;    
}

Typographical Units

Points (pt) and picas (pc) are typographical units. By definition, there are 72 points to an inch and 12 points to one pica. Like the absolute units, the typographical units are most useful for print style sheets, not for onscreen use.

Example:

p {
    font-size: 1pt;    
}

h1 {
    font-size: 1pc;    
}

Relative Units

The relative units of length are pixel (px) and percentage (%). A percentage is a unit proportional to the parent’s value for that property; a pixel is relative to the physical pixel on the display device used.

Pixels and percentages are two of the most useful units in CSS for onscreen displays. Pixels are fixed size, so they allow very precise control over the layout in a web document. Percentages, on the other hand, are useful for defining font sizes for text content because the text remains scalable, which is important for small devices and accessibility purposes.

Example:

p {
    font-size: 1px;    
}

h1 {
    font-size: 1%;    
}

Viewport Units

Viewport width (vw) and viewport height (vh) units allow elements to be dimensioned relative to the viewport, meaning the visible portion of the document. Each unit represents a percentage of the current viewport.

Example:

width: 50vw; /* 50% of viewport width */
height: 25vh; /* 25% of viewport height */

Font-Relative Units

Two additional relative measures are em-height (em) and ex-height (ex). Em-height is the same as the font-size; ex-height is about half the font-size.

Example:

.one-ex { font-size: 1ex; }
.one-em { font-size: 1em; }