Reference: CSS Units
Tags: css, webdev, beginners, reference
Published: 2023-10-17 21:01:59

| Unit     | Explanation and Usage                                      | Equivalents                   | Common Usages                   | When to Use                                   |
|----------|-----------------------------------------------------------|-------------------------------|----------------------------------|----------------------------------------------|
| `ch`     | Character Width: Relative to the width of the "0" (zero) character. | N/A                 | Monospaced fonts, grids     | Best for consistent character-based spacing.    |
| `cm`     | Centimeters: Absolute physical unit (for print).         | N/A                           | Print styles, physical sizing | Print styles or specific physical measurements. |
| `dvh`    | Dynamic Viewport Height: Relative to a percentage of the current viewport's height. | N/A | Dynamic, responsive layouts | Ideal for elements that need to adapt to the viewport. |
| `dvw`    | Dynamic Viewport Width: Relative to a percentage of the current viewport's width. | N/A | Dynamic, responsive layouts | Suitable for responsive components with dynamic sizing. |
| `em`     | Relative to the font-size of its parent.                 | 1em = 100% of parent's size  | Text sizing, flexible layouts  | Good for responsive typography and layout.     |
| `ex`     | x-height: Relative to the height of the font's lowercase "x." | N/A                 | Text-related spacing         | Useful for aligning text elements.              |
| `in`     | Inches: Absolute physical unit (for print).              | N/A                           | Print styles, physical sizing | Print styles or specific physical measurements. |
| `lvh`    | Limited Viewport Height: Relative to a percentage of the viewport's height, but with limits. | N/A | Limited, responsive components | Useful for responsive elements within a defined range. |
| `lvw`    | Limited Viewport Width: Relative to a percentage of the viewport's width, but with limits. | N/A | Limited, responsive components | Great for responsive elements within a specified width range. |
| `mm`     | Millimeters: Absolute physical unit (for print).         | N/A                           | Print styles, physical sizing | Print styles or specific physical measurements. |
| `pc`     | Picas: Absolute physical unit (for print).               | 1pc = 12 points              | Print styles, typography     | Use for print styles or typography in print media. |
| `pt`     | Points: Absolute physical unit (for print).              | 1pt = 1/72 of an inch       | Print styles, typography     | Use for print styles or typography in print media. |
| `px`     | Pixel: A unit representing a single dot on a screen.     | N/A                           | Text, borders, fixed layouts    | Use for precise control or non-scalable elements. |
| `Q`      | Quarter Millimeters: Absolute physical unit (for print).  | 1Q = 1/4 of a millimeter     | Precise print layouts         | Ideal for very fine-grained control in print styles. |
| `rem`    | Relative to the font-size of the root (`<html>`) element.| 1rem = 100% of root's size    | Consistent, scalable layouts  | Ideal for maintaining a consistent scaling factor. |
| `svh`    | Scroll-Viewport Height: Relative to the viewport's height including the scrollable area. | N/A | Scrolling components | Suitable for scroll-dependent layouts. |
| `svw`    | Scroll-Viewport Width: Relative to the viewport's width including the scrollable area. | N/A | Scrolling components | Great for elements that depend on the viewport plus scrollable area. |
| `vi`     | Viewport-Percentage: A percentage of the initial containing block's size. | N/A | Legacy and special cases | Not commonly used in modern web design. |
| `vh`     | Viewport Height: A percentage of the viewport's height.  | 1vh = 1% of viewport height   | Full-page elements, headers   | Use for responsive, full-height components.    |
| `vmax`   | Viewport Maximum: Based on the larger of width/height.   | N/A                           | Responsive typography         | Useful for flexible, large typography.          |
| `vmin`   | Viewport Minimum: Based on the smaller of width/height.  | N/A                           | Scaling, aspect ratios       | Maintain aspect ratios in responsive designs.    |
| `vw`     | Viewport Width: A percentage of the viewport's width.    | 1vw = 1% of viewport width    | Sliders, responsive columns   | Great for responsive, full-width components.   |