What is the unit in CSS ?
The unit in CSS is the second element of a length that defines the type of the length number.
Example:
- px,
- em,
- etc …
Recommended
The recommended unit scales are:
Type
There are two types of length units:
When the physical properties of the output medium are
- unknown, use relative unit
- known, use absolute unit.
Relative
Relative length units specify a length relative to another length property. Style sheets that use relative units will more easily scale from one medium to another (e.g., from a computer display to a laser printer).
Relative units are:
- em: the font-size of the element (of its parent)
- rem: font size of the root element of the document.
- ex: the 'x-height' of the relevant font
- px: pixels, relative to the viewing device
- %: percentage - each element defines to which the percentage refers
- sizes relative to the reader's window:
- vw : 1/100th of the window's width
- vh. 1/100th of the window's height.
- vmin the smallest of vw and vh.
- vmax the greatest of vw and vh
Absolute
Absolute length units are only useful when the physical properties of the output medium are known. The absolute units are:
- in: inches — 1 inch is equal to 2.54 centimeters.
- cm: centimeters
- mm: millimeters
- pc: picas — 1 pica is equal to 12 points.
Example(s):
h1 { margin: 0.5in } /* inches */
h2 { line-height: 3cm } /* centimeters */
h3 { word-spacing: 4mm } /* millimeters */
h4 { font-size: 12pt } /* points */
h4 { font-size: 1pc } /* picas */
In cases where the used length cannot be supported, user agents must approximate it in the actual value.