CSS Units

Last Updated : 11 Apr, 2026

CSS units define the size of elements and help control layout and spacing in a webpage. They can be absolute or relative depending on how values are calculated.

  • Absolute units like px and cm have fixed sizes and do not change with screen size.
  • Relative units like em, rem, %, and vh adjust based on parent elements or viewport.
  • Useful for creating responsive and scalable designs.

Types of CSS Units

CSS provides two main types of units:

1. Absolute units

Absolute units in CSS, such as px, cm, and mm, have fixed values and do not change based on the viewport or parent elements. They are used when precise, unchanging measurements are needed for elements.

1. cm

A centimeter (cm) is a length unit in the SI system, derived from the meter (m), with 1 m = 100 cm. The SI system is maintained by the BIPM(International Bureau of Weights and Measures).

1 cm = 1 / 100 m
HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        p {
            font-size: 2cm;
            color: green;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <p>Welcome to GFG</p>
</body>
</html>
<!--Driver Code Ends-->

2. mm

The millimeter (mm), introduced during the French Revolution's metric system, became part of the SI system. It is maintained by the International Bureau of Weights and Measures (BIPM).

1 cm=10mm
1mm=1/10 cm
HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        p {
            font-size: 20mm;
            color: green;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <p>Welcome to GFG</p>
</body>

</html>
<!--Driver Code Ends-->

3. inch(in)

The inch originated from ancient human measurements, based on the width of a thumb or the length of a dried grain of barley. It was standardized in 1959 by an international agreement, defining it as exactly 25.4 millimeters to align with the metric system.

1 inch = 2.54cm =2.54 * 1cm=2.54* 10mm= 25.4mm
HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        p {
            font-size: .5in;
            color: green;
        }
    </style>

<!--Driver Code Starts-->
</head>

<body>
    <p>Welcome to GFG</p>
</body>
</html>
<!--Driver Code Ends-->

4. pixel (px)

A pixel (px) is the smallest unit on a digital screen, representing a point of light. More pixels mean better image clarity and higher screen resolution.

1px = 0.26mm
HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        p {
            font-size: 40px;
            color: green;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <p>Hello GFG How are you?</p>
</body>
</html>

<!--Driver Code Ends-->

5. pt (point)

A point (pt) is a typography unit equal to 1/72 of an inch, used for font sizes and spacing in design.

1pt = 1/72 inch(1 inch=2.54cm)
1pt= 1.33px
HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        p {
            font-size: 50pt;
            color: green;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <p>Hello Geeks</p>
</body>
</html>

<!--Driver Code Ends-->

6. 1 pc(pica)

A pica is a unit used in print and design, equal to 12 points or 1/6 of an inch (4.233 mm). It helps define layout dimensions like font and image sizes.

1pc=12pt=15.96px
HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        p {
            font-size:5pc;
            color: green;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <p>Hello Geeks</p>
</body>
</html>
<!--Driver Code Ends-->

2. Relative Units

Relative units are CSS units that scale based on another value such as parent size or viewport.

1. em

In CSS , the "em" unit refers to the font-size of its parent element, defaulting to the root element (<html>) if it's the only one in the DOM.

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        .ok {
            font-size: 20px;
        }
        .para {
            font-size: 2em;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="ok">
        Hello GFG
        <div class="para"> Hello GFG</div>
    </div>
</body>
</html>
<!--Driver Code Ends-->
  • The div has a font-size of 20px, and the p tag's font-size is set to 2em, where 1em equals the div's font-size.
  • Therefore, the p tag's font-size is 40px (2 * 20px), based on the parent's font-size.

2. rem

In CSS, rem is based on the font-size of the root element (<html>) and stays the same in all cases.

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        html {
            font-size: 25px; 
      }
.para {
            font-size: 2rem;
            color: red;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="para"> Hello GFG</div>
</body>
</html>

<!--Driver Code Ends-->
  • The <html> element sets the base font size to 25px.
  • .para uses 2rem, so its font size becomes 50px (2 × 25px), with red text.

3. vw or view-width

In CSS, vw depends on the viewport width, which changes with screen size, so an Android phone has a smaller vw than an HD TV.

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        .para {
            height: 10vw;
            width: 50vw;
            border: 2px solid black;
            background-color: chocolate;
            font-size: 30px;
        }

<!--Driver Code Starts-->
    </style>
</head>
<body>
    <div class="para"> Hello GFG</div>
</body>
</html>
<!--Driver Code Ends-->

In this code, the div's height is 50% of the viewport width and 10% of the viewport height.

4. vh or view-height

The vh unit in CSS is 1% of the viewport height, useful for responsive design to scale elements with the window size.

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        .full-height {
            height: 100vh;
            background-color: lightblue;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="full-height">
        <h1>This div is 100% of the viewport height (100vh)</h1>
    </div>
</body>
</html>
<!--Driver Code Ends-->
  • .full-height sets the <div> height to 100% of the viewport height (100vh) with a light blue background.
  • Uses Flexbox to center the <h1> both vertically and horizontally inside the div.

5. percentage(%)

The % unit in CSS is relative to the parent element's size, allowing elements to adjust dynamically for responsive design.

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        .container {
            width: 200px;
            height: 100px;
            background-color: lightgreen;
        }
        .child {
            width: 50%;
            height: 50%;
            background-color: lightcoral;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="container">
        <div class="child"></div>
    </div>
</body>
</html>
<!--Driver Code Ends-->
  • .container creates a 200px by 100px box with a light green background.
  • .child is 50% of the container’s width and height (so 100px by 50px), with a light coral background, making it scale relative to the parent.

6. vmin

The vmin unit in CSS is based on the smaller of the viewport's width or height, helping elements scale proportionally for responsive designs.

HTML 
<!--Driver Code Starts-->
<html>
<head>
</head>
<!--Driver Code Ends-->

<style>
    div {
        height: 10vmin;
        width: 20vmin;
        background-color: blueviolet;
    }
</style>

<!--Driver Code Starts-->
<body>
    <div></div>
    <script>
        const vw = window.innerWidth;
        const vh = window.innerHeight;
        console.log(`Viewport width: ${vw / 100}px, Viewport height: ${vh / 100}px`);
    </script>
</body>
</html>

<!--Driver Code Ends-->
  • The <div> has a height of 10vmin and width of 20vmin, making its size relative to the smaller dimension of the viewport, with a blueviolet background.
  • The JavaScript logs the viewport width and height per 1% (vw/100 and vh/100) to the console for reference.

7. vmax

vmax is a CSS unit that represents 1% of the larger viewport dimension (width or height), helping elements scale based on the screen's dominant size.

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        div {
            height: 2vmax;
            width: 8vmax;
            background-color: cadetblue;
        }
    </style>
</head>
<body>
    <div>
    </div>
    <script>
        const vw = window.innerWidth;
        const vh = window.innerHeight;
        const actualvw = vw / 100;
        const actualvh = vh / 100;
        console.log("view-width:" + actualvw);
        console.log("view-height:" + actualvh);
    </script>

<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
  • The code creates a div with a size of 10% of the larger viewport dimension (vmax) and a cadet blue background.
  • The JavaScript calculates and logs the viewport width and height in pixels by dividing the inner Width and inner Height by 100.

8. ch

The ch unit in CSS represents the width of the "0" character of the current font. It's a relative unit commonly used for sizing text elements to maintain proportional widths and heights based on character dimensions.

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        .small {
            font-family: monospace;
            font-size: 25px;
            height: 10ch;
            width: 10ch;
            background-color: cornflowerblue;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="small">
        Hello GFG
    </div>
</body>
</html>

<!--Driver Code Ends-->
  • .small sets font to monospace, size 25px, width & height 10ch, background cornflowerblue.
  • Displays “Hello GFG” inside a square box with uniform character spacing.

9. ex

Relative to the height of the letter "x" in the current font, primarily used for vertical spacing and font-related measurements.

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        .small {
            font-family: monospace;
            font-size: 25px;
            height: 10ex;
            width: 10ex;
            background-color: cornflowerblue;
        }

    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="small">
        Hello GFG
    </div>
</body>
</html>
<!--Driver Code Ends-->
  • The code creates a div with the class .small, displaying the text "Hello GFG" in a monospace font with a font size of 25px.
  • The div 's height and width are set to 10ex, where "ex" is based on the height of the letter "x" in the font, and the background color is cornflower blue.

10. lh

This unit is relative and depends on the line-height of the current element.

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        .small {
            font-family: sans-serif;
            font-size: 20px;
            line-height: 8;
            height:1lh;
            width: 1lh;
            background-color: aquamarine;
        }
     
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="small">
        Hello GFG
    </div>
</body>
</html>
<!--Driver Code Ends-->
  • The code creates a div with the class .small, displaying "Hello GFG" with a sans-serif font, 25px font size, and a line height of 10. The div's height and width are set using the lh unit, based on the line height.
  • Since the line height is 10, the div's height and width are both 20px (2 * line height), and the background color is aquamarine.

Choosing the Right CSS Unit

Choosing the right CSS unit depends on the layout needs, responsiveness, and screen size, as absolute units offer fixed sizing while relative units adapt better to different devices.

Use case of Absolute Units

Absolute units are used when a fixed and precise size is required, such as in print layouts, PDFs, borders, or elements that must remain the same size regardless of screen size or device.

  • Use for elements requiring fixed sizes, like borders, icons, or print layouts where precise measurements are important.
  • Suitable for situations where responsiveness is not a priority, such as static components.

Use case of Relative Units

Relative units are used to create responsive and flexible layouts, as their sizes adjust based on screen size, parent elements, or user settings, making them ideal for modern, device-friendly web designs.

  • Use for responsive designs that adapt to various devices and screen sizes, ensuring flexibility and accessibility.
  • Ideal for fluid layouts, scalable typography, or elements influenced by viewport or parent dimensions (e.g., vw, %, or rem).

Difference Between Absolute and Relative Units in CSS

Absolute units have fixed sizes that don’t change with screen or parent elements, while relative units scale based on the parent, root, or viewport, making layouts more flexible and responsive.

Absolute UnitsRelative Units
Not responsive; sizes remain fixed regardless of screen size or resolution.Highly responsive; adjust dynamically based on context.
Independent of parent elements or viewport size.Dependent on parent, root, or viewport dimensions.
Harder to scale across different devices.Scales well for responsive design.
Ensures exact sizing, providing uniformity across devices.Size may vary based on parent or viewport, allowing flexibility.
Can hinder accessibility by not adjusting to user-defined browser settings.Adapts to user settings like font size, enhancing accessibility.
May be faster to render as values are fixed.Requires calculation based on context, potentially increasing rendering time.
Comment
Article Tags:
Web Technologies
CSS
CSS-Basics

Explore