KandZ – Tuts

We like to help…!

CSS 3 – units

units are used to specify various properties like width, height, margin, padding, font-size, etc
pixels (px) → a fixed size relative to the device screen
Percentage (%) → Relative to another value
usually parent element, viewport width, or viewport height
Em (em) → Relative to the current font size. em is equivalent to the font-size specified for the current element.
This makes text scaling easier and more consistent across different devices and texts.
Rem (rem) → Similar to em, but relative to the root font size (html tag's font-size)
It's often used as a unit for scalable typography or global spacing.

vw → Relative to viewport width (percentage of full screen width).
vh → Relative to viewport height (percentage of full screen height).
vmin and vmax → Relative to the lesser/greater dimension of the viewport.
deg → Angle in degrees.
rad → Angle in radians.
grad → Angle in gradians (approximately 1/400 of a circle).
turn → Full circle (360 degrees or 2π radians).

ex → Relative to the x-height (approximately 0.5 of the font size).
lh → It is relative to the line height of the element.
rlh → It is relative to the line height of the root element.
ch → Width of a character.
fr → Fraction for grid layout.
cm, mm, in, pt, pc → Absolute length units in ...
centimeters, millimeters, inches, points, picas, and pixels respectively.

Leave a Reply