CSS. units

- CSS has several different units for expressing a length.
- A whitespace cannot appear between the number and the unit. However, if the value is 0, the unit can be omitted.

- For some CSS properties, negative lengths are allowed.

 

There are two types of length units: absolute and relative.

1. Absolute Lengths
Absolute length units are not recommended for use on screen, because screen sizes vary so much. However, they can be used if the output medium is known, such as for print layout.

cm	centimeters
mm	millimeters
in	inches (1in = 96px = 2.54cm)
px	pixels (1px = 1/96th of 1in)	Pixels (px) are relative to the viewing device.  For low-dpi devices, 1px is one device pixel (dot) of the display. For printers and high resolution screens 1px implies multiple device pixels.
pt	points (1pt = 1/72 of 1in)
pc	picas (1pc = 12 pt)

 

2. Relative Lengths

Relative length units specify a length relative to another length property. Relative length units scale better between different rendering mediums.
- The em and rem units are practical in creating perfectly scalable layout!
- Viewport = the browser window size. If the viewport is 50cm wide, 1vw = 0.5cm.

em	Relative to the font-size of the element	font-size (of parent/root/current/0)
rem	Relative to font-size of the root element
ex	Relative to the x-height of the current font (rarely used)
ch	Relative to width of the "0" (zero)
vw	Relative to 1% of the width of the viewport*	viewport
vh	Relative to 1% of the height of the viewport
vmin	Relative to 1% of viewport's* smaller dimension
vmax	Relative to 1% of viewport's* larger dimension
%	Relative to the parent element	parent element

---

https://www.w3schools.com/cssref/css_units.asp

CSS Units

https://webclub.tistory.com/356

CSS의 7가지 단위 - rem, vh, vw, vmin, vmax, ex, ch