DEV Community

Michael Scott Hertzberg
Michael Scott Hertzberg

Posted on

Reference: CSS Units

#css #webdev #beginners #reference
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.

Top comments (0)