All about CSS units in one shot
There are multiple units in CSS that you must have seen while learning or creating any project. Sometimes we see “em”, “rem”, “px” etc.
But in this article today, we will try to learn why there are these many properties and why they all exist.
Till now whatever CSS units you might have used will lie in either of one category i.e. Absolute and Relative.
First, let’s try to understand what Absolute and Relative mean.
I. Absolute Units: Absolute units are fixed values that do not depend on any other factors. They provide a specific and consistent size regardless of the context or environment.
Pixels (px): Pixels are the most commonly used unit in web design. A pixel represents a single dot on a screen and is the smallest unit of measurement. The advantage of pixels is their stability and accuracy, as they provide a precise representation of size across devices. However, the fixed nature of pixels can lead to layout issues on different screen sizes or resolutions.
II. Relative Units: Relative units are flexible and adjust their size according to various factors such as the parent element, viewport, or font size. These units enable designers to create responsive and adaptable layouts.
- Percent (%): Percentages are relative to the parent element’s size. When a property is defined in percentage, it is calculated based on the size of the parent container. For example, if a div’s width is set to 50%, it will occupy half of its parent container’s width. Percentages are useful for creating fluid layouts that adapt to different screen sizes, making them ideal for responsive design.
- EM (em): The em unit is relative to the font size of the current element or its nearest parent element with a specified font size. For instance, if a paragraph has a font size of 16 pixels and the margin is set to 1em, the margin size will be 16 pixels. The em unit cascades, meaning it inherits the font size from parent elements. This property allows for scalable typography and consistent spacing.
- REM (rem): REM stands for “root em” and calculates its value based on the root element’s font size. By default, the root element is the <html> tag. Unlike the em unit, rem is not affected by the font size of parent elements, making it useful for maintaining consistent sizing across the entire webpage. REM is particularly helpful for responsive designs and accessibility, as it ensures that elements scale proportionally regardless of their nesting depth.
- Viewport Height (vh) and Viewport Width (vw): Viewport-based units, vh and vw, are relative to the size of the browser window. They represent a percentage of the viewport’s height and width, respectively. For example, setting an element’s height to 50vh will make it occupy 50% of the browser’s height. These units are valuable for creating responsive designs and ensuring that elements adapt well to different screen sizes.
- Calc() Function: The calc() function allows for mathematical calculations within CSS declarations. It enables combining different units to achieve dynamic and responsive layouts. For instance, one can use calc(50% — 20px) to create a fluid layout where an element occupies half of its parent container’s width minus a fixed 20 pixels. The calc() function is powerful for complex calculations involving various units, and it enhances the flexibility of CSS layouts.
To summarize, CSS units can be categorized into absolute and relative units. Absolute units, such as pixels, provide fixed sizes that are consistent across devices. On the other hand, relative units, including percent, em, rem, vh, and vw, adapt their size based on various factors like the parent element, viewport, or font size. These relative units offer more flexibility for responsive design and enable designers to create adaptable layouts that look good on different devices and screen sizes. Additionally, the calc() function allows for mathematical calculations, combining different units to achieve dynamic and responsive designs.
Understanding and effectively utilizing CSS units is crucial for web designers and developers to create visually appealing and responsive websites. By mastering these units, one can ensure consistent and flexible designs that provide a seamless user experience across a wide range of devices.