CSS Lengths Viewer
Explore and understand CSS length units like never before. This interactive lab lets you visualize how
different units - from px and em to rem, vw, vh,
and typographic units like ch and ex - behave in real layouts.
CSS has a wide range of lengths that can be used when setting properties for border, width, height, margin, and padding, just to name a few.
Adjust numeric values, experiment with root and parent font sizes, toggle a 1cm grid, and see instant feedback in a dynamic preview panel. The conversion table and detailed unit explanations help you learn the math behind each unit and understand the best practices for responsive and accessible design.
CSS Lengths Viewer
| Unit | Category | Result |
|---|
About CSS Length Viewer
The CSS Length Viewer is an interactive learning tool designed to help developers, designers, and students understand how CSS length units work in real-world layouts. Unlike static references, this lab shows live, visual feedback for any value and unit combination.
CSS provides a variety of units - from absolute units like px, cm, and pt
to relative units like em, rem, vw, vh, and typographic units
like ch and ex. Choosing the right unit is critical for responsive, accessible,
and consistent designs.
Key Features:
Interactive Controls: Adjust values with sliders, select units, and instantly see the effect on both a visual bar and sample text.
Absolute & Relative Units: Explore how fixed pixels differ from scalable
remandemunits.Visual Comparison: Observe how units relate to each other side-by-side in a dynamic preview panel.
Typography & Layout Preview: Test different fonts, font sizes, and even toggle a 1cm grid to see real-world scaling.
Educational Explanations: Every unit comes with a detailed description explaining how it works, when to use it, and common pitfalls.
Responsive & Modern: Works on any device and adapts to viewport changes, making it ideal for learning and experimentation.
How to Use:
Use the sliders to set a numeric value for your desired length.
Select the source unit from the dropdown (px, em, rem, vw, vh, cm, mm, pt, pc, ch, ex).
Adjust root and parent font sizes to see how relative units respond.
Change the font family and toggle the 1cm grid for layout experimentation.
Observe the visual bar, sample text, and the conversion table to understand the relationships between units.
Read the detailed unit explanation to learn best practices and common pitfalls.
This tool is perfect for anyone learning CSS, building responsive designs, or wanting to understand how unit choice affects scalability, accessibility, and layout precision.
The CSS Units
In CSS, lengths are used to define the size or dimensions of various elements on a web page. CSS lengths are used to specify properties like the width, height, margins, padding, and font sizes. There are several types of CSS length units, and they can be categorized into two main groups: absolute units and relative units.
Absolute Length Units:
Pixels (px): Pixels are a common unit of measurement in web design. A pixel is a single dot on a computer screen and is a fixed unit of measurement. One pixel is equivalent to one device pixel on most screens, but high-density displays may use multiple device pixels to render one CSS pixel.
Points (pt): Points are used primarily for specifying font sizes. One point is approximately equal to 1/72 of an inch. They are used for print style sheets and may not be consistent in size across different screens.
Picas (pc): Picas are another unit used for print design, with 1 pica equal to 12 points or 1/6 of an inch.
Inches (in): An inch is a standard unit of length in the imperial system, and it's not commonly used for web design due to its large size.
Centimeters (cm): Centimeters are a metric unit of length and are not commonly used for web design but may be useful in some cases.
Millimeters (mm): Millimeters are also a metric unit and are rarely used in web design.
Relative Length Units:
Em (em): The "em" unit is relative to the font size of the parent element. For example, if you set the font size of an element to 1.5em, it will be 1.5 times the font size of its parent element.
Rem (rem): The "rem" unit is similar to "em," but it's relative to the root (html) element's font size, providing a more predictable and consistent sizing relative to the base font size.
Percentage (%): Percentages are relative to the parent element. For example, setting a width to 50% means it's half the width of its parent element.
Viewport Percentage Units (vw, vh, vmin, vmax): These units are relative to the size of the viewport, making them useful for creating responsive designs that adapt to different screen sizes.
vwrepresents a percentage of the viewport width,vhis a percentage of the viewport height,vminis a percentage of the smaller of the two (width or height), andvmaxis a percentage of the larger of the two.
CSS lengths give you flexibility in designing web layouts and ensure that elements respond to different screen sizes and devices. Choosing the right unit depends on the specific design requirements and the context in which you're using them.
Frequently Asked Questions
What is the difference between px, em, and rem in CSS?
px is an absolute unit - it always renders at the same fixed size regardless of any other settings.
em is relative to the font size of the element's parent, so it scales up or down depending on context and can compound unpredictably in deeply nested elements.
rem (root em) is always relative to the font size of the root <html> element, making it consistent and predictable throughout the entire document.
For most font sizes and spacing, rem is the recommended choice because it respects the user's browser font size preferences while remaining easy to reason about.
When should I use em vs rem?
Use rem for font sizes and global spacing - it gives you a single consistent baseline (the root font size) that scales well for accessibility.
Use em when you specifically want something to scale relative to its immediate context. A common example is padding or margin on a button: setting these in em means they automatically scale up or down if you change the button's font size, without needing to change the padding values separately.
Avoid using em for deeply nested font sizes, as the values compound - a 1.2em element inside another 1.2em element results in 1.44× the root size, not 1.2×.
What is the difference between vw and vh in CSS?
vw stands for viewport width - 1vw equals 1% of the browser window's width. As the window is resized horizontally, values in vw scale accordingly.
vh stands for viewport height - 1vh equals 1% of the browser window's height. It is commonly used for full-screen hero sections (height: 100vh).
A common gotcha with vh on mobile browsers is that the address bar is included in or excluded from the viewport height depending on whether it is visible, which can cause elements to shift as users scroll. The newer svh, lvh, and dvh units were introduced to address this.
What does the ch unit mean in CSS?
ch is equal to the width of the "0" (zero) glyph in the current font at the current font size.
It is most commonly used to set a comfortable reading line length - for example max-width: 65ch limits a paragraph to roughly 65 characters wide, which is widely considered an optimal line length for readability.
Because ch is tied to the specific font in use, the exact pixel width varies between fonts. It works best as a typographic measure rather than a precise layout dimension.
What are absolute vs relative CSS length units?
Absolute units (px, cm, mm, in, pt, pc) are fixed in size - they do not change based on screen size, font settings, or parent elements. On screens, these map to device pixels; on print, they map to physical measurements.
Relative units (em, rem, %, vw, vh, ch, ex) are calculated in relation to something else - a parent element, the root font size, or the viewport. They are the foundation of responsive and accessible web design because they adapt to the user's context rather than imposing a fixed size.
Should I use px or rem for font sizes?
rem is strongly preferred for font sizes in accessible web design.
When font sizes are set in px, they do not respond to the user's browser default font size setting - a user who has increased their browser font size for readability will not benefit from your sizing.
With rem, your font sizes scale proportionally when the root font size changes, either because the user has changed their browser preference or because you have adjusted it in a media query. The common approach is to leave the root at its browser default (usually 16px) and then set all font sizes in rem.
What is the difference between vmin and vmax?
vmin equals 1% of whichever is smaller - the viewport width or height. On a portrait phone (narrower than it is tall), 1vmin equals 1% of the width. On a landscape screen (wider than it is tall), 1vmin equals 1% of the height.
vmax is the opposite - 1% of whichever viewport dimension is larger.
vmin is particularly useful for elements that need to fit within the visible screen in any orientation, such as modal dialogs or square thumbnails. vmax works well for large decorative backgrounds that should always fill the screen edge to edge.
How many pixels is 1rem?
By default, 1rem equals 16px in virtually all browsers, because the default root font size is 16px. However, this can change if the user has altered their browser's default font size in settings, or if you explicitly set a different font size on the <html> element in your CSS.
A common pattern is to set html { font-size: 62.5%; } which makes 1rem equal to 10px, making mental arithmetic easier (e.g. 1.6rem = 16px). However, this approach overrides the user's browser preference and reduces accessibility, so it is increasingly discouraged.
When should I use percentage instead of vw for widths?
Use % when you want an element to be sized relative to its parent container. This is the right choice for most layout work - columns inside a grid, child elements inside a flex container, and so on.
Use vw when you want something to be sized relative to the browser window itself, regardless of where the element sits in the DOM. Full-width banners, background sections that break out of a container, and fluid typography that scales with the screen are all good candidates for vw.
A useful combination is width: min(90%, 1200px) which uses a percentage to stay within the viewport but caps the maximum size at a fixed pixel value.
Are cm, mm, and in useful in CSS?
On screen, physical units like cm, mm, and in are mapped to pixels using a fixed ratio (1in = 96px, 1cm ≈ 37.8px) and do not correspond to real physical measurements on screen - a 1cm element will not actually be 1 centimeter wide on your monitor in most cases.
Their primary practical use is in print stylesheets (@media print), where the browser uses the printer's DPI to render them as true physical measurements on paper. For screen layouts they offer no advantage over pixels and are rarely used.
Page last updated on: