CSS Units

CSS units are used to define the size of elements, margins, padding, fonts, and other properties that require measurement. There are two types of units in CSS: absolute units and relative units. Each has different use cases depending on the layout requirements and the desired responsiveness.

1. Absolute Units

Absolute units are fixed and do not change relative to other elements. They are typically used for precise measurements where scalability is not a priority.

Common Absolute Units:

px (pixels): The most commonly used unit. It represents a single dot on the screen, and the size is fixed.
- Example: width: 200px;
pt (points): 1 point is 1/72 of an inch. Primarily used in print styling.
- Example: font-size: 12pt;
in (inches): 1 inch equals 2.54 cm. It is a physical measurement.
- Example: width: 2in;
cm (centimeters): A physical measurement unit. 1 cm equals 10 millimeters.
- Example: height: 5cm;
mm (millimeters): A smaller physical measurement. 1 mm equals 1/10 of a cm.
- Example: border-width: 1mm;
pc (picas): 1 pica equals 12 points. It is mostly used in printing contexts.
- Example: font-size: 10pc;
em (em units): Relative to the font size of the parent element. It is scalable and often used in typography.
- Example: font-size: 2em; (this will be twice the size of the parent element’s font size).
rem (root em units): Relative to the root element’s font size (<html> element). A useful unit for responsive typography.
- Example: font-size: 1.5rem; (this will be 1.5 times the font size of the root element).

2. Relative Units

Relative units are flexible and scalable. They adapt based on the context, such as the size of the viewport or the parent element’s properties.

Common Relative Units:

% (percentage): A percentage is relative to the parent element’s size. Often used for widths, heights, margins, and padding to create responsive layouts.
- Example: width: 50%; (this will be 50% of the parent element’s width).
vh (viewport height): Relative to 1% of the height of the viewport. Useful for creating full-height layouts.
- Example: height: 100vh; (this will take up the entire height of the viewport).
vw (viewport width): Relative to 1% of the width of the viewport. This is commonly used for responsive designs based on the width of the screen.
- Example: width: 50vw; (this will take up 50% of the viewport’s width).
vmin: Relative to the smaller of either vw or vh. This can be useful when you want an element to scale based on the smallest dimension of the viewport.
- Example: font-size: 5vmin; (this will adjust based on the smaller dimension of the viewport).
vmax: Relative to the larger of either vw or vh. This can be used when you want an element to scale based on the larger dimension of the viewport.
- Example: font-size: 10vmax; (this will adjust based on the larger dimension of the viewport).
ch (character): Relative to the width of the “0” (zero) character in the current font. Useful in typography for setting widths based on character count.
- Example: width: 20ch; (this will set the width to the width of 20 “0” characters).
ex (x-height): Relative to the height of the lowercase “x” in the current font. This unit is rarely used but can be helpful for fine-tuned typography.
- Example: font-size: 2ex; (this will be twice the x-height of the current font).

3. Other Notable Units

auto: Often used with properties like width and height to automatically adjust an element’s size based on its content.
- Example: width: auto;
calc(): This function allows you to perform calculations to determine a property value using a combination of different units.
- Example: width: calc(100% - 20px); (this will subtract 20px from the width of the element).
clamp(): This function allows you to define a value that can scale between a minimum and maximum, but with a preferred value in between.
- Example: font-size: clamp(1rem, 5vw, 2rem); (the font-size will be between 1rem and 2rem, but try to scale with the viewport width).

When to Use Each Unit

Absolute units like px, pt, cm are best used when you need precise control and don’t need to worry about responsiveness.
Relative units like %, em, rem, vw, and vh are ideal for responsive layouts and designs that need to adapt to various screen sizes and contexts.
calc() and clamp() can be used for advanced, dynamic layouts where you need more control over how properties scale across different devices or viewport sizes.

Examples

Example 1: Using Relative Units for a Responsive Layout

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            width: 80%;
            margin: 0 auto;
        }

        .box {
            width: 50vw;
            height: 50vh;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>

Try It Now

In this example, the .box element will always take up 50% of the viewport width (50vw) and 50% of the viewport height (50vh), making it responsive to screen size.

Example 2: Using `calc()` for Dynamic Width

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .box {
            width: calc(100% - 20px);
            height: 100px;
            background-color: coral;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>