CSS has several different units for expressing a length. They are used to set lengths, paddings, margins, align elements and so on.
The following are all absolute length units, they are not relative to anything else, and are generally considered to always be the same size.
|cm||Centimeters 1cm = 96px/2.54|
|mm||Millimeters 1mm = 1/10th of 1cm|
|Q||Quarter-millimeters 1Q = 1/40th of 1cm|
|px||Pixels 1px = 1/96th of 1in|
|pc||Picas 1pc = 1/6th of 1in|
|pt||Points 1pt = 1/72th of 1in|
|in||Inches 1in = 2.54cm = 96px|
Relative units are useful for styling responsive sites because they scale relative to the parent or window size (depending on the unit).
|em||Relative to the font-size of the element (2em means 2 times the size of the current font)|
|ex||x-height of the element’s font.|
|ch||The advance measure (width) of the glyph “0” of the element’s font.|
|rem||The font size of the root element.|
|lh||The line height of the element.|
|vw||1% of the viewport’s width.|
|vh||1% of the viewport’s height.|
|vmin||1% of the viewport’s smaller dimension.|
|vmax||1% of the viewport’s larger dimension.|
|%||Relative to the parent element|
|em, ex, %, px, cm, mm, in, pt, pc||1.0||3.0||1.0||1.0||3.5|