Historically equal to "one pixel".
Absolute. 1px == 1px throughout a page.
In print, 1px == 1/96in
mm, cm, in, PT, PC
Physical/historical units made for print.
Often unexpected results when using on screen media.
1in = 2.54cm = 25.4mm = 72pt = 6pc (= 96px in print)
Percentage of width (or height) relative to an element's container.
Sometimes relative to something completely different:
line-height: 50%; for example.
Aren't universal, only work with properties that explicitly accept percentages. border-width for example cannot be a percentage.
Gotchas: margin and padding are always calculated from width.
Relative to the font-size of the
element. If no font-size is set, it is inherited.
1em = 1 × font-size.
Allows you to control many dimensions from a single parent text-size.
Gets complicated with nested text-sizes based on em units. for example:
... 10 × 1.8 × 1.25 × 0.25 × 50 = 281.25 (px)
What's the actual width of the last element?
Like "em", but relative to the x-height of the font and font-size of the current element.
Like "em", but relative to the
of the character "0" given the font and font-size of the current element.
Can be thought of as "characters".
Could be useful for code snippets, for example. (width: 80ch)
Like "em", but always relative to the font-size of the root element (usually <html>).
More straight-forward and maintainable approach to scaling a page's dimensions with responsive breakpoints.
VH, VW, VMIN, VMAX
1vh = 1% of the viewport height.
1vw = 1% of the viewport width.
1vmin = 1% of the viewport's smallest dimension
1vmax = 1% of the viewport's largest dimension
Great for creating statically scalable webpages without breakpoints.
Made with Slides.com