CSS has several measurement units for length and size.These measuring units are used to specify non-zero value to the CSS properties.
CSS units are used where we need to define size of length. EX - height,width,border-size,padding,font-size etc.
CSS unit values are specified by a number value followed by a unit and there should be no space between number and unit.
- height: 25 px; is WRONG WAY there should be no space between value and unit
- height: 25px; is RIGHT WAY
There are two type of length unit:
The absolute length unit is of fixed length.It shows exactly specified size on any screen.
Device to device screen size varies so absolute length units are not recomended.It is dependent on output medium.It can be used when the desired output is known.
These are absolute units with their description:
|cm||1cm = 1 centimeter (standard length unit)|
|mm||1mm(millimeter) = 1/10 centimeter|
|in||1in(inch) = 2.54 centimeter|
|pt||1pt(point) = 1/72 inch (0.3527mm)|
|px||1px(pixel) = 0.75pt|
|pc||1pc(picas) = 12pt|
Relative unit length specifies length according to another length property.It is flexible with device to device and better to use in different size devices.It changes with different rendering medium.
|em||It is relative to the current font size of the element.1em means same size of font 2em means 2 times of current font-size.|
|ex||It is relative to current x-height of font.|
|vh||It is related to height of viewport.1vh=1% of height of viewport.|
|vw||It is related to width of viewport.1vh=1% of width of viewport.|
|%||It is relative to the font size of the parent element.|
This paragraph has 2 times its regular font.