lengths
The CSS data type applies to measurements for the following CSS properties: width, height, margin, padding, font-size, border-width, text-shadow, etc. There are two types of length units: relative and absolute.
Relative units
Font-relative lengths:
- em
- ex
- ch
- rem
Viewport-percentage length:
- vh
- vw
- vmin
- vmax
em
Relative to the font-size of the parent element. 3 em means 3 times the size of the font that has its parent.
ex
Relative to the x-height of the current font.
ch
Relative to width of the “0” (zero, the Unicode character U+0030) in the element’s font.
rem
Relative to font-size of the root element (html).
em and rem units are used to create scalable layouts.
Viewport-percentage
Viewport-percentage lengths defined a length relatively to the size of viewport, that is the visible portion of document.
vw
Relative to 1% of the width of the viewport
vh
Relative to 1% of the height of the viewport
vmin
Relative to 1% of viewport’s smaller dimension: between the height and the width of the viewport.
vmax
Relative to 1% of vieport’s larger dimension: between the height and the width of the viewport.
Absolute units
- in – inches 1in = 2.54cm = 96px
- cm – centimeters 1cm = 37.8px
- mm – milimeters 1 mm = 0.1cm = 3.78px
- pt – points – the points used by CSS are equal to 1/72nd of 1in.
- pc – picas – 1pc = 12pt.
- px – pixel – 1px = 0.75pt
px
Pixels have nothing to do with the screen pixels. Pixels (px) are relative to the viewing device: low-dpi devices or high resolution screens. Now we have CSS px which is a Angular Measurement.