Web Style Sheets CSS tips & tricks

submited by

Style Pass

2021-06-08 14:00:02

CSS offers a number of different units for expressing length. Some have their history in typography, such as point (pt) and pica (pc), others are known from everyday use, such as centimeter (cm) and inch (in). And there is also a “magic” unit that was invented specifically for CSS: the px. Does that mean different properties need different units?

There is no restriction on which units can be used where. If a property accepts a value in px (margin: 5px) it also accepts a value in inches or centimeters (margin: 1.2in; margin: 0.5cm) and vice-versa.

But in general you would use a different set of units for display on screen than for printing on paper. The following table gives the recommended use: Recommended Occasional use Not recommended Screen em, px, % ex pt, cm, mm, in, pc Print em, cm, mm, in, pt, pc, % px, ex

The relation between the absolute units is as follows: 1in = 2.54cm = 25.4mm = 72pt = 6pc If you have a ruler handy you can check how precise your device is: here is a box of 1in (2.54cm) high: ↑ 72pt ↓