CSS Units Reference Guide for Responsive Web Design
Understanding CSS units is essential for creating responsive, accessible, and visually balanced web layouts. In modern web development, CSS length units define the dimensions such as width, height, margin, and padding, which are crucial for controlling spacing and layout structure across all screen sizes and devices.
This complete reference guide for CSS units explains how to use each unit in HTML markup and CSS3 stylesheets. From traditional pixel-based measurements to flexible viewport-based and scalable relative units, you will learn how to choose the most effective unit for any design task.
Types of CSS Units
CSS units are categorized based on their behavior in different layout and rendering contexts.
- Absolute Length Units
- Relative Length Units
- Root Font-relative Units
- Local Font-relative Units
- Viewport Units
- Dynamic Viewport Units
- Small Viewport Units
- Large Viewport Units
- Angle Units
- Time Units
- Frequency Units
- Resolution Units
By mastering CSS length units like px, em, rem, vh, vw, and other units as in below reference table, you can create responsive, scalable, and device-adaptive styles with precision across modern web interfaces.
Alphabetical CSS Units Reference
Below is an alphabetical reference of all CSS units — use the filter buttons or search bar to explore by category or keyword.
| Name | Unit | Description |
| Cap Height | cap | Height of uppercase letters |
| Centimeters | cm | Fixed print measurement, not scalable |
| Character | ch | Width of “0” glyph |
| Container Block | cqb | 1% of container’s block dimension |
| Container Height | cqh | 1% of container’s height |
| Container Inline | cqi | 1% of container’s inline dimension |
| Container Max | cqmax | Larger between cqi and cqb |
| Container Min | cqmin | Smaller between cqi and cqb |
| Container Width | cqw | 1% of container’s width |
| Degrees | deg | Angle measure in degrees |
| Dots per Centimeter | dpcm | Pixels per centimeter |
| Dots per Inch | dpi | Pixels per inch |
| Dots per Pixel | dppx | Pixel ratio per device |
| Dynamic Viewport Block | dvb | 1% of dynamic block size |
| Dynamic Viewport Height | dvh | 1% of dynamic viewport height |
| Dynamic Viewport Inline | dvi | 1% of dynamic inline size |
| Dynamic Viewport Max | dvmax | 1% of dynamic maximum size |
| Dynamic Viewport Min | dvmin | 1% of dynamic minimum size |
| Dynamic Viewport Width | dvw | 1% of dynamic viewport width |
| EM | em | Relative to parent font size |
| EX | ex | Height of lowercase x |
| Fractional Units | fr | Portion of available space |
| Gradians | grad | 1/400 of a full circle |
| Hertz | Hz | Cycles per second frequency |
| IC Width | ic | Width of CJK glyph |
| Inches | in | Fixed print measurement |
| Kilohertz | kHz | Thousand cycles per second |
| Large Viewport Block | lvb | 1% of large block size |
| Large Viewport Height | lvh | 1% of large viewport height |
| Large Viewport Inline | lvi | 1% of large inline size |
| Large Viewport Max | lvmax | 1% of large maximum size |
| Large Viewport Min | lvmin | 1% of large minimum size |
| Large Viewport Width | lvw | 1% of large viewport width |
| Line Height | lh | Current element’s line height |
| Millimeters | mm | Fixed print measurement |
| Milliseconds | ms | One thousandth of a second |
| Percentage | % | Relative to parent container |
| Picas | pc | Fixed typography measurement |
| Pixels | px | Fixed screen measurement |
| Pixel Ratio | x | Scale of device pixel density |
| Points | pt | Fixed print typography unit |
| Quarter-millimeters | Q | Fixed quarter-millimeter unit |
| Radians | rad | Angle based on arc length |
| Root Capital Height | rcap | Root element uppercase height |
| Root Character Width | rch | Root element glyph width |
| Root EM | rem | Relative to root font size |
| Root IC Width | ric | Root CJK glyph width |
| Root Line Height | rlh | Root element’s line height |
| Root x-Height | rex | Height of root lowercase x |
| Small Viewport Block | svb | 1% of small block size |
| Small Viewport Height | svh | 1% of small viewport height |
| Small Viewport Inline | svi | 1% of small inline size |
| Small Viewport Max | svmax | 1% of small maximum size |
| Small Viewport Min | svmin | 1% of small minimum size |
| Small Viewport Width | svw | 1% of small viewport width |
| Seconds | s | Standard time measurement |
| Turns | turn | One full 360° rotation |
| Viewport Block | vb | 1% of block size |
| Viewport Height | vh | 1% of viewport height |
| Viewport Inline | vi | 1% of inline size |
| Viewport Maximum | vmax | 1% of larger side |
| Viewport Minimum | vmin | 1% of smaller side |
| Viewport Width | vw | 1% of viewport width |