--- title: "Understanding CSS Units (em, rem, px, cm)" description: "Understanding CSS units is crucial for accurately sizing and positioning elements on a webpage." author: "Ravi Vishwakarma" published: 2024-06-05 updated: 2024-06-05 canonical: https://www.mindstick.com/blog/304313/understanding-css-units-em-rem-px-cm category: "css-css3" tags: ["css-css3", "css"] reading_time: 4 minutes --- # Understanding CSS Units (em, rem, px, cm) Understanding CSS units is crucial for accurately sizing and positioning elements on a webpage. Here's an overview of some commonly used CSS units: **Pixels (px)**: - Pixels are a fixed unit of measurement. - They provide a precise control over element sizes. - One pixel is typically equal to one device pixel, making them consistent across devices with different pixel densities. - However, they are not easily scalable and may not adapt well to different [screen sizes](https://www.mindstick.com/forum/158661/how-to-create-a-responsive-layout-that-adapts-to-different-screen-sizes-using-css-media-queries) or [user preferences](https://www.mindstick.com/forum/159311/implement-a-react-component-that-sorts-and-filters-data-based-on-user-preferences). ## Example - ```css .box { width: 200px; height: 100px; border: 2px solid black; } ``` In this example, `.box` has a fixed width of 200 pixels and a fixed height of 100 pixels. Regardless of the context, the box will always be 200 pixels wide and 100 pixels high. **Ems (em)**: - The `em` unit is relative to the [font size](https://www.mindstick.com/forum/158654/what-is-the-css-property-used-to-specify-the-font-size-of-an-element) of the element. - For example, [if an element](https://www.mindstick.com/forum/160320/how-you-can-check-if-an-element-exists-in-a-set-and-add-or-remove-elements-from-it) has a font size of 16px, `1em` is equal to 16px. - If an element has a font size of 20px, `1em` is equal to 20px. - This makes `em` units versatile for [responsive design](https://www.mindstick.com/blog/303702/responsive-design-best-practices-examples) because they scale relative to the font size of their parent elements. - However, nesting elements with `em` units can lead to compounding effects, making it challenging to predict sizes accurately. ## Example - ```css .parent { font-size: 16px; } .child { font-size: 1.5em; /* 1.5 times the font size of the parent */ } ``` Here, the font size of `.child` is 1.5 times the font size of its parent `.parent`. If `.parent` has a font size of 16px, `.child` will have a font size of 24px (16px * 1.5). **Root em (rem)**: - Similar to `em` units, but relative to the font size of the [root element](https://www.mindstick.com/interview/1692/what-is-root-element-in-xml) (``). - This makes `rem` units particularly useful for establishing a consistent sizing scale across the entire webpage. - They avoid the compounding effects of nested `em` units since they are always relative to the root element's font size. - `rem` units are excellent for managing global layout and typography. ## Example - ```css html { font-size: 16px; } .box { width: 10rem; /* 10 times the font size of the root element */ } ``` If the root element (``) has a font size of 16px, then `1rem` is equal to 16px. So, the width of `.box` will be 160px (16px * 10). **Centimeters (cm)**: - Centimeters are absolute units of measurement. - They are primarily used for print stylesheets or when precise physical dimensions are required. - Unlike pixels, they can adjust based on the user's printer settings or [screen resolution](https://answers.mindstick.com/qa/102458/explain-the-significance-of-a-laptop-s-screen-resolution). ## Example - ```css .box { width: 5cm; /* 5 centimeters */ height: 3cm; /* 3 centimeters */ border: 1px solid black; } ``` In this example, the `.box` element will have a width of 5 centimeters and a height of 3 centimeters. The actual size of the screen depends on the screen resolution and the user's display settings. #### Absolute Lengths The absolute length units are fixed and a length expressed in any of these will appear as exactly that size. | Unit | Description | | --- | --- | | cm | centimeters | | mm | millimeters | | in | inches (1in = 96px = 2.54cm) | | px * | pixels (1px = 1/96th of 1in) | | pt | points (1pt = 1/72 of 1in) | | pc | picas (1pc = 12 pt) | #### Relative Lengths Relative length units specify a length relative to another length property. Relative length units scale better between different rendering mediums. | Unit | Description | | --- | --- | | em | Relative to the font-size of the element (2em means 2 times the size of the current font) | | ex | Relative to the x-height of the current font (rarely used) | | ch | Relative to the width of the "0" (zero) | | rem | Relative to font-size of the root element | | vw | Relative to 1% of the width of the viewport* | | vh | Relative to 1% of the height of the viewport* | | vmin | Relative to 1% of viewport's* smaller dimension | | vmax | Relative to 1% of viewport's* larger dimension | | % | Relative to the [parent element](https://www.mindstick.com/forum/156679/select-any-parent-element-of-any-tag-via-jquery) | Each unit has its strengths and use cases, and [choosing the right](https://answers.mindstick.com/qa/111781/what-are-the-main-considerations-for-choosing-the-right-programming-language-for-a-project) one depends on factors like the design requirements, scalability, and accessibility considerations of your webpage. --- Original Source: https://www.mindstick.com/blog/304313/understanding-css-units-em-rem-px-cm Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.