There is more then one way to define a lenght in CSS.
Al the different units are split up in two groups, absolute and relative lenghts.
Absolute length units are fixed.
When you expresse a lenght in one of these, then it will appear as exactly that size.
|in||inches (1in = 96px = 2.54cm)|
|px||pixels (1px = 1/96th of 1in) |
pixels are relative to the viewing device
|pt||points (1pt = 1/72 of 1in)|
|pc||picas (1pc = 12 pt)|
Relative length units specify a length relative to another length property. Relative length units scale better between different rendering medium.
|%||Relative to the parent element|
|ch||Relative to the width of the "0" (zero)|
|em||Relative to the font-size of the element (2em means 2 times the size of the current font)|
|ex||Relative to the x-height of the current font (rarely used)|
|rem||Relative to font-size of the root element|
|vh||Relative to 1% of the height of the viewport|
|vmax||Relative to 1% of viewport's larger dimension|
|vmin||Relative to 1% of viewport's smaller dimension|
|vw||Relative to 1% of the width of the viewport|