Three Most Common Units of Measurements in HTML: px, em, %

Every language has its own units of measurements, but nothing like that of HTML. You have three options so choose them wisely.

Pixels (px)

px is a “fixed” unit of measure — it’s unit size is based on the actual number of pixels on device screen and will always occupy that many pixels regardless of its parent tag’s size.

Em (as in M) and %

em and % are known as “relative” units — they auto-resize according to their “parent tag’s” unit size. There’s a nice story to where em came from. In a nutshell it has to do with the printing press invented a couple of centuries ago when letter tiles were used together to form words. The basic unit of measurement was the capital letter “M”. And that’s where the unit size em got its name from. It measures exactly one unit size which is equal to the width of the capital letter M. Try it and you’ll see that it’s precisely that.

1 em = 1 M

Want to learn more? Christian recommends: