CSS units are used to specify the size of elements, such as font size, width, height, margins, padding, etc. The most common CSS units are pixels (px), em, rem, percent (%), and viewport units (vw, vh, vmin, vmax). Pixels (px) are fixed-size units that are used for screen resolutions, while em/rem are relative units that are based on the font size of the parent element. Percent (%) is a unit that is relative to the parent element’s size, while viewport units (vw, vh, vmin, vmax) are based on the size of the browser window.
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|