Web Developer Reference: Comprehensive List of CSS Units

Here’s a guide to all currently available CSS units, with explanations and common use notes. This includes all CSS units listed in MDN Web Docs as of 2025aug15.

Sections:

By Category

Angle units

  • deg: Angle Degrees (360deg = full circle).
  • grad: Angle Gradians (400grad = full circle).
  • rad: Angle Radians (2πrad = full circle).
  • turn: Angle Turns (1turn = full circle).
    Used in transforms, gradients, and trigonometric functions.

          Frequency units

          • Hz: Hertz. Cycles per second (e.g., for aural/speech media).
          • kHz: Kilohertz (1000Hz). Rarely used in typical web CSS.

            Length Units: Absolute length units (fixed physical or device-referenced)

            • px: CSS pixel. The most common unit for on-screen layout. Scales with zoom; not a physical device pixel.
            • in: Inch (1in = 96px).
            • cm: Centimeter (1cm = 96px/2.54).
            • mm: Millimeter (1mm = 1/10 of a cm).
            • Q: Quarter-millimeter (1Q = 0.25mm).
            • pt: Point (1pt = 1/72in).
            • pc: Pica (1pc = 12pt).

            Length Units: Container query length units (relative to a query container)

            Used inside container queries to size relative to the container, not the viewport.

            • cqw: 1% of the container’s inline size (width in horizontal writing).
            • cqh: 1% of the container’s block size (height in horizontal writing).
            • cqi: 1% of the container’s inline size (alias of cqw; inline axis-aware).
            • cqb: 1% of the container’s block size (alias of cqh; block axis-aware).
            • cqmin: The smaller of cqi and cqb.
            • cqmax: The larger of cqi and cqb.

            Length Units: Font-relative length units

            • em: Relative to the font size of the element (or the parent for properties that inherit). 1em = current computed font-size.
            • rem: Relative to the root element’s font size (html). Stable across nested elements.
            • ex: x-height of the element’s font (height of lowercase “x”). Varies by font.
            • ch: Width of the “0” (zero) glyph of the element’s font. Useful for character-based measures.
            • cap: Cap height of the element’s font (height of capital letters).
            • ic: Width of the “水” ideograph in CJK fonts. Useful for East Asian layout.
            • rch: Root ch; width of “0” in the root element’s font.
            • rcap: Root cap height.
            • ric: Root ideograph width.
            • rex: Root x-height.
            • rlh: Root line height; relative to the computed line-height of the root element.
            • lh: Relative to the element’s computed line-height. Handy for vertical rhythm.
            • x: Alias historically used in some contexts for ex (not standard across specs; prefer ex). Note: many tools don’t support x—avoid.

            Length Units: Fractional unit for grids

            • fr: Fraction of the free space in a CSS Grid container. Only valid in grid track sizing (grid-template-columns/rows, minmax, etc.).

            Length Units: Small/large/dynamic viewport units (account for browser UI)

            These variants consider browser UI overlays (like mobile address bars) and different viewport concepts:

            • svw, svh, svi, svb: Small viewport. The smallest possible viewport dimensions (UI fully shown).
            • lvw, lvh, lvi, lvb: Large viewport. The largest possible viewport (UI fully hidden).
            • dvw, dvh, dvi, dvb: Dynamic viewport. The current effective viewport (changes as UI shows/hides).
            • svmin, svmax: 1% of the small viewport’s min or max axis.
            • lvmin, lvmax: 1% of the large viewport’s min or max axis.
            • dvmin, dvmax: 1% of the dynamic viewport’s min or max axis.

            Length Units: Viewport-relative units (dynamic to the viewport size)

            • vw: 1% of the viewport width.
            • vh: 1% of the viewport height.
            • vmin: The smaller of vw and vh.
            • vmax: The larger of vw and vh.
            • vi: 1% of the viewport’s inline size (respects writing mode; inline axis).
            • vb: 1% of the viewport’s block size (respects writing mode; block axis).

            Percentage units

            • % (percentage): Relative to another value depending on the property:
              • Lengths: usually relative to the parent’s content box size (e.g., width: 50%).
              • Typography: sometimes relative to font-size (e.g., line-height: 120%).
              • Transforms, gradients, positioning, etc., have their own reference boxes.
            • percentage: Same as %; the keyword appears in some specs/typed-OM references. In author CSS, use %.

            Resolution units

            • dpi: Dots per inch. E.g., image-resolution, @media resolution queries.
            • dpcm: Dots per centimeter.
            • dppx: Dots per CSS pixel (1dppx = 96dpi). Useful for high-DPI media queries.

              Time units

              • s: Seconds.
              • ms: Milliseconds (1s = 1000ms).
                Used in transitions, animations, and timing functions.

              Notes and tips

              • Prefer rem for scalable, accessible sizing of text and spacings; combine with em for component-internal scaling.
              • Use ch to cap measure (line length) around 60–75ch for readability.
              • Viewport units (especially dv*) are preferable on mobile to avoid layout jumps when browser UI shows/hides.
              • Container query units (cq*) enable responsive components independent of the full viewport—great for component libraries.
              • Absolute physical units (in, cm, mm, Q, pt, pc) are not reliable for exact physical sizes on screens; they map to px via CSS’s reference pixel. Use them mainly for print media.

              Alphabetically:

              • % (percentage): Relative to another value depending on the property:
                • Lengths: usually relative to the parent’s content box size (e.g., width: 50%).
                • Typography: sometimes relative to font-size (e.g., line-height: 120%).
                • Transforms, gradients, positioning, etc., have their own reference boxes.
                • percentage: Same as %; the keyword appears in some specs/typed-OM references. In author CSS, use %.
              • cap: Cap height of the element’s font (height of capital letters).
              • ch: Width of the “0” (zero) glyph of the element’s font. Useful for character-based measures.
              • cm: Centimeter (1cm = 96px/2.54).
              • cqb: 1% of the container’s block size (alias of cqh; block axis-aware).
              • cqh: 1% of the container’s block size (height in horizontal writing).
              • cqi: 1% of the container’s inline size (alias of cqw; inline axis-aware).
              • cqmax: The larger of cqi and cqb.
              • cqmin: The smaller of cqi and cqb.
              • cqw: 1% of the container’s inline size (width in horizontal writing).
              • deg: Angular degrees (360deg = full circle).
              • dpcm: Dots per centimeter.
              • dpi: Dots per inch. E.g., image-resolution, @media resolution queries.
              • dppx: Dots per CSS pixel (1dppx = 96dpi). Useful for high-DPI media queries.Note: You listed dpi twice; it’s the same unit.
              • dvmin, dvmax: 1% of the dynamic viewport’s min or max axis.
              • dvw, dvh, dvi, dvb: Dynamic viewport. The current effective viewport (changes as UI shows/hides).
              • em: Relative to the font size of the element (or the parent for properties that inherit). 1em = current computed font-size.
              • ex: x-height of the element’s font (height of lowercase “x”). Varies by font.
              • fr: Fraction of the free space in a CSS Grid container. Only valid in grid track sizing (grid-template-columns/rows, minmax, etc.).
              • grad: Angular gradians (400grad = full circle).
              • Hz: Hertz. Cycles per second (e.g., for aural/speech media).
              • ic: Width of the “水” ideograph in CJK fonts. Useful for East Asian layout.
              • in: Inch (1in = 96px).
              • kHz: Kilohertz (1000Hz). Rarely used in typical web CSS.
              • lh: Relative to the element’s computed line-height. Handy for vertical rhythm.
              • lvmin, lvmax: 1% of the large viewport’s min or max axis.
              • lvw, lvh, lvi, lvb: Large viewport. The largest possible viewport (UI fully hidden).
              • mm: Millimeter (1mm = 1/10 of a cm).
              • ms: Milliseconds (1s = 1000ms).Used in transitions, animations, and timing functions.
              • pc: Pica (1pc = 12pt).
              • pt: Point (1pt = 1/72in).
              • px: CSS pixel. The most common unit for on-screen layout. Scales with zoom; not a physical device pixel.
              • Q: Quarter-millimeter (1Q = 0.25mm).
              • rad: Angular radians (2πrad = full circle).
              • rcap: Root cap height.
              • rch: Root ch; width of “0” in the root element’s font.
              • rem: Relative to the root element’s font size (html). Stable across nested elements.
              • rex: Root x-height.
              • ric: Root ideograph width.
              • rlh: Root line height; relative to the computed line-height of the root element.
              • s: Seconds.
              • svmin, svmax: 1% of the small viewport’s min or max axis.
              • svw, svh, svi, svb: Small viewport. The smallest possible viewport dimensions (UI fully shown).
              • turn: Angular turns (1turn = full circle).Used in transforms, gradients, and trigonometric functions.
              • vb: 1% of the viewport’s block size (respects writing mode; block axis).
              • vh: 1% of the viewport height.
              • vi: 1% of the viewport’s inline size (respects writing mode; inline axis).
              • vmax: The larger of vw and vh.
              • vmin: The smaller of vw and vh.
              • vw: 1% of the viewport width.
              • x: Alias historically used in some contexts for ex (not standard across specs; prefer ex). Note: many tools don’t support x—avoid.

              Related Articles