Measurement units are used to size CSS elements either absolutely or relative to another element.
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 or 16px = 12pt.
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. 12pt = 16px
pc Pica (1 pc is the same as 12 points) as for pts use in print stylesheets only.
% 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
ch Represents the width of one character, or more precisely the advance measure, of the glyph "0" (zero, the Unicode character U+0030) in the element's font. Internet Explorer interprets 1ch as the width of the 0 glyph, without the surrounding space. This makes 1ch shorter in IE compared to any other browser.em An em unit is equal to the computed font-size of the element to which the em is applied. If an element has a font-size that is set (or inherited) to be 20px, then 20px=1em. Then setting other elements e.g. padding:0.5em; will equate to 10px;
If the font-size is itself set using ems, then it will inherit the size from it's parent(s), possibly going all the way back to the document's root element.
A size set in ems will cascade, which makes resizing an emement as easy as changing the font-size, rather than changing font-size and borders and padding etc.
rem Like em, but the size is always Relative to the "root" element.
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 can 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.
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).
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 is a CSS function that allows simple arithmetic calculations, use it anywhere a length or a size is required.
Available in all modern browsers.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 can 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.The em is so called because it is often equal to the width of an upper case letter M. The EM SPACE character will always be 1 em wide, all other characters (including even the EM DASH) can vary in size according to the font-family.
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:
#Emw3box {
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.
CSS Length Units - MDN.
Lengths and Units - W3C.
REM vs EM – The Great Debate zellwk.com
CSS Values and Units Reference - MSDN IE.