CSS has several measurement units for length and size. These measuring units are used to specify a 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 numerical 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 types 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 recommended. It is dependent on an 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|
The relative unit length specifies length according to another length property. It is flexible with the 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 the same size of font 2em means 2 times of current font-size.|
|ex||It is relative to the current x-height of the font.|
|vh||It is related to the height of viewport.1vh=1% of the height of the viewport.|
|vw||It is related to the width of viewport.1vh=1% of the width of the viewport.|
|%||It is relative to the font size of the parent element.|
This paragraph has 2 times its regular font.