demosthenes.info

Iā€™m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Ruler

CSS Length Measurement Units

css / the box model

Estimated reading time: 1 minute, 30 seconds

While CSS has many ways to measure linear distance, all of them can be broadly classified into two groups:

  • absolute values that relate to a real-world system, such as picas or pixels.
  • relative units that relate to the element itself, or its context.

As a general rule, relative units are preferred for ; absolute units are for small fixed-width elements such as hairlines.

Absolute
CSS Unit CSS Abbreviation
Pixelspx
Pointspt
Inchesin
Centimeterscm
Picaspc
Relative
CSS UnitCSS Abbreviation
Percent%
Emem
Exex
Root emrem
Viewport widthvw
Viewport heightvh
Viewport minimumvm
characterch
Gridgd

For more information, I've linked lesser-known units to associated in-depth articles that explain them thoroughly.

1em is the width of the m character in the default font set for that browser. (ex is the height of the x character in a font).

ch is the equivalent of em, but applied to the width of the 0 (zero) numeral of the chosen font.

gd relates to the CSS grid; unfortunately, only IE10+ currently supports the grid module.

You never need to specify units when declaring a length value of 0: zero centimeters is the same as 0 pixels. In all other cases, units of measurement should be declared: 2em, 2px, etc.

All systems of CSS measurement can take floating point values: 2.25rem, 5.3cm, etc.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.