CSS Units

Measurement units are used to size CSS elements either absolutely or relative to another element.:

Absolute Units

px pixels (a non-linear angular measurement) based on a pixel density of 96dpi and a nominal arm’s length of 28 inches: 1px = 0.0213 degrees (visual angle). If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values. 1px is equal to 0.75pt

in Inch

cm Centimeter

mm Millimeter

pt Point (1 pt is the same as 1/72 inch) point sizes are accurate on paper but inconsistent across browsers when used for on-screen display. Use in print stylesheets only.

pc Pica (1 pc is the same as 12 points) as for pts use in print stylesheets only.

Relative Units

% A percentage based on the parent element (the length of same property). For an element 40px wide, a child element with width: 50% will render at 20px

em So called because it is often equal to the width of an upper case letter M. The size will cascade for elements-within-elements, for example setting a font-size for <p> in ems will make the <p> size relative to it's parent, typically the <body> tag. The EM SPACE character will always be 1 em wide, all other characters (including even the EM DASH) may vary in size according to the font-family.

rem Like em, but the size is always Relative to the "root" element (IE 9+)

ex The x-height of a font (so called because it is often equal to the height of the lowercase "x")

The advantage of relative units is that the sizes can cascade, from <BODY> to element to sub-element. This may be useful if you need to manually or dynamically change the size of the entire page, just one change to the top level will do the trick.
With absolute units, each rule is fixed in size, to make everything larger or smaller will involve editing multiple CSS rules.

Viewports (a new units of measure in CSS3)

Currently supported only in Chrome:

vw each unit is equal to 1% of the width of the containing block, e.g. if the width of the viewport is 200mm, h1 { font-size: 8vw } will set h1 elements to 16mm (200/100×8).
vh each unit is equal to 1% of the height of the containing block
vmin Equal to the smaller of ‘vw’ or ‘vh’.
vmax Equal to the larger of ‘vw’ or ‘vh’.

Relative and absolute units can be mixed, for example a parent element could be sized at 18px (fixed) and the child element at 75% (relative).

Baseline font sizes:

Most web browsers have a default font-size of 16px, there will be some users who will adjust this (typically for accessibility reasons.)

 100% = 1 em ~= 16px ~= 14pt

Calc

Calc is a CSS function that allows simple arithmetic calculations, use it anywhere a length or a size is required.
Available in IE9, Firefox 16, Chrome 26, Safari 6.1, iOS 7

   calc(expression)
expression Any simple expression combining the following operators:

       +   Addition.
       -   Subtraction.
       *   Multiplication. At least one of the arguments must be a number.
       /   Division. The right-hand side must be a number.

The operands in the expression may be any length syntax value.
You can freely mix different units for each value in the expression.
Use parentheses to establish computation order when needed.

Examples

Stretch across the window, with a 40-pixel gap between both sides of the element and the edges of the window:

.banner {
   width: 90%;         /* fallback for browsers without support for calc() */
   width: calc(100% - 80px);
}

Fit into one quarter of the screen:

#ss64box {
   width: 150px;       /* fallback for browsers without support for calc() */   
   width: calc(100% / 4);
}

“Failure of the Orbiter occurred because the flight system software was written using metric units, while the ground crew were entering course correction and thruster data using Imperial measures” ~ NASA Mars Climate Orbiter

Related:

border-width - Width of the four borders.
font-size - Font size of text
Lengths and Units - W3C
CSS Values and Units Reference - MSDN


© Copyright SS64.com 1999-2014
Some rights reserved