CSS units are used to style the HTML elements by specifying the size, position, and other properties of HTML elements. There are several types of CSS units like rem, em, px, vh, vw, percentage and each with its own specific use case.
CSS units can be broadly categorized into two main types: absolute units and relative units. Each type has specific use cases and characteristics.
Absolute Units
Absolute units are fixed and do not change based on other elements or the viewport. They provide exact measurements.
- px (pixels): Represents a single dot on the screen.
- cm (centimeters): Represents a centimeter.
- mm (millimeters): Represents a millimeter.
- in (inches): Represents an inch.
- pt (points): Represents 1/72 of an inch.
- pc (picas): Represents 1/6 of an inch.
Relative Units
Relative units, on the other hand, are providing flexibility and responsiveness. They are based on other measurements, such as the size of the parent element, the root element, or the viewport.
- em: Relative to the font-size of the nearest parent element.
- rem: Relative to the font-size of the root element.
- vh (viewport height): 1% of the height of the viewport.
- vw (viewport width): 1% of the width of the viewport.
- % (percentage): Relative to the size of the parent element.
- vmin: 1% of the smaller dimension of the viewport (width or height).
- vmax: 1% of the larger dimension of the viewport.
- ch: Relative to the width of the “0” (zero) character in the current font.
- ex: Relative to the x-height of the current font (height of the lowercase “x”).
- cap: Relative to the height of capital letters in the current font.
- ic: Relative to the size of the “水” (water) character in the current font.
- lh: Relative to the line-height of the element.
- rlh: Relative to the line-height of the root element.
In this blog, we’ll focus on the most important and frequently used CSS units like px, em, rem, vh, vw, % and their usage based on usecases.
Pixels (px)
Pixels(px) are the most commonly used CSS unit. They are used to specify the size of an element in terms of the number of pixels on the screen.
px considered absolute units, although they are relative to the DPI
and resolution of the display device.
Pixels are the most straight forward unit in CSS, representing a single dot on the screen. It does not change relative to other elements or the viewport size.
Use Cases:
-
Use
pxwhen we need precise control over the layout, such as borders, margins, padding, or any other element where exact dimensions are crucial. -
Ideal for elements like images, icons, or any component that requires a fixed size regardless of the user’s screen size or device.
-
The use of
pxcan be problematic for responsive websites, but useful for maintaining a consistent size for some elements. If we have elements that should not be resized, then usingpxis a good option.
.element {
width: 200px;
height: 100px;
}Em (em)
The em unit is relative to the font size of the parent element i.e. to the font-size of its closest (parent) container. If the parent has a font-size of 16px, 1em equals 16px.
Use Cases:
-
Use
emfor components that should scale relative to the font-size of their parent element, such as padding, margins, and widths. -
Useful for setting typography related styles like line-height and font-size in a way that scales proportionally with the surrounding text.
-
Unlike
px,emis better suited to responsive design and also help to comply with accessibility standards.
.parent {
font-size: 20px;
}
.child {
width: 2em; /* Equals 40px because 1em is 20px */
padding: 1em; /* Equals 20px */
}Rem (rem)
Unlike em the rem unit is relative to the font-size of the root element (<html>) and it stands for “root em”. If the root element has a font-size of 16px, 1rem equals 16px.
Use Cases:
-
Use
remto ensure consistent scaling across the entire document, as it is based on the root element’s font size, making it easier to maintain and predict how elements will scale. -
Helpful in creating responsive designs where the root font size can be adjusted for different screen sizes, and all elements scale accordingly.
html {
font-size: 16px;
}
.element {
width: 2rem; /* Equals 32px because 1rem is 16px */
padding: 1rem; /* Equals 16px */
}Vh (vh)
vh stands for “viewport height”, which is the height of the visible screen.
vh units are relative to 1% of the viewport’s height. 100vh represents 100% of the viewport height or the full height of the screen.
Use Cases:
-
Use
vhfor elements that need to occupy a certain percentage of the viewport height, such as full-screen sections or headers that span the height of the viewport. -
Useful for ensuring elements adapt to the viewport height, especially in web applications and landing pages.
.fullscreen-section {
height: 100vh; /* Occupies the entire height of the viewport */
}Vw (vw)
vw stands for “viewport width”, which is the width of the visible screen.
vw units are relative to 1% of the viewport’s width. 100vw represents 100% of the viewport width or the full width of the screen.
Use Cases:
-
Use
vwfor elements that need to occupy a certain percentage of the viewport width, such as full-width images, sliders, or sections. -
Useful for scaling typography relative to the viewport width for dynamic and responsive text sizes.
.full-width-image {
width: 100vw; /* Occupies the entire width of the viewport */
}Percentage (%)
Percentage units are used to specify the size of an element as a percentage of its parent element. They are relative to the parent element’s dimensions. For example, a width of 50% means half the width of the parent element.
Use Cases:
-
Use percentage units for creating fluid and flexible layouts that adapt to the size of the parent container, such as grid layouts or responsive containers.
-
Helpful in making elements scale proportionally within their parent, ensuring adaptability across different screen sizes.
.parent {
width: 80%;
}
.child {
width: 50%; /* Half the width of the parent */
padding: 10%; /* 10% of the parent's width */
}When should we use one unit over another?
-
Absolute Units (px): Use when precise control over the layout is necessary, such as fixed-size images or borders.
-
Relative Units (em, rem, %): Use for scalable and responsive designs, ensuring elements adapt to changes in font size or parent dimensions.
-
Viewport Units (vh, vw): Use for full-screen elements or responsive typography based on the viewport size.
By understanding these categories and their specific units, we can choose the appropriate unit for different design scenarios to create more effective and responsive web designs.
