Css Length Units Px Em Rem Vh Vw Complete Guide

 Last Update:2025-06-22T00:00:00     .NET School AI Teacher - SELECT ANY TEXT TO EXPLANATION.    7 mins read      Difficulty-Level: beginner

Online Code run

🔔 Note: Select your programming language to check or run code at

💻 Run Code Compiler

Step-by-Step Guide: How to Implement CSS Length Units px, em, rem, vh, vw

1. Pixels (px)

Pixels are the most common and basic unit. They define a fixed size in pixels.

Example: Setting font size in pixels

  1. HTML:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Pixels Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

  2. CSS (styles.css):

    h1 {
    font-size: 32px;
    color: #333;
}

  3. Output:

    • The <h1> tag will have a font size of 32 pixels, which will not change regardless of the screen size or parent element.

2. Ems (em)

Ems are relative to the font size of the parent element.

Example: Setting font size with em

  1. HTML:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Ems Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Parent Title</h1>
        <p>Child paragraph text.</p>
    </div>
</body>
</html>

  2. CSS (styles.css):

    .container {
    font-size: 16px;
    color: #333;
}

.container h1 {
    font-size: 2em; /* 2 * 16px = 32px */
}

.container p {
    font-size: 1.2em; /* 1.2 * 16px = 19.2px */
}

  3. Output:

    • The <h1> tag within the .container will have a font size of 32 pixels.
    • The <p> tag within the .container will have a font size of 19.2 pixels.
    • If you change the .container font size to 20px, the <h1> will become 40px (2 * 20px) and the <p> will become 24px (1.2 * 20px).

3. Root Ems (rem)

Rems are relative to the font size of the root element (html).

Example: Setting font size with rem

  1. HTML:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Rems Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Parent Title</h1>
        <p>Child paragraph text.</p>
    </div>
</body>
</html>

  2. CSS (styles.css):

    html {
    font-size: 16px;
    color: #333;
}

.container h1 {
    font-size: 2rem; /* 2 * 16px = 32px */
}

.container p {
    font-size: 1.2rem; /* 1.2 * 16px = 19.2px */
}

  3. Output:

    • The <h1> tag within the .container will have a font size of 32 pixels.
    • The <p> tag within the .container will have a font size of 19.2 pixels.
    • If you change the html font size to 20px, the <h1> will become 40px (2 * 20px) and the <p> will become 24px (1.2 * 20px).

4. Viewport Height (vh)

Vh refers to the height of the viewport (visible part of the web page).

Example: Setting height with vh

  1. HTML:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Vh Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container"></div>
</body>
</html>

  2. CSS (styles.css):

    .container {
    width: 100%;
    height: 50vh; /* 50% of the viewport height */
    background-color: #f0f0f0;
}

  3. Output:

    • The .container will take up 50% of the viewport's height, resizing dynamically based on the viewport's height.

5. Viewport Width (vw)

Vw refers to the width of the viewport (visible part of the web page).

Example: Setting width with vw

  1. HTML:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Vw Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container"></div>
</body>
</html>

  2. CSS (styles.css):

    .container {
    width: 75vw; /* 75% of the viewport width */
    height: 100px;
    background-color: #e0e0e0;
}

  3. Output:

    • The .container will take up 75% of the viewport's width, resizing dynamically based on the viewport's width.

Summary

  • px: Fixed size in pixels.
  • em: Relative to the font size of the parent element.
  • rem: Relative to the font size of the root element (html).
  • vh: Relative to the height of the viewport.
  • vw: Relative to the width of the viewport.

Top 10 Interview Questions & Answers on CSS Length Units px, em, rem, vh, vw

1. What does px represent in CSS?

Answer:
px stands for "pixels." It’s a unit of length in CSS that corresponds to a fixed number of pixels on the screen. One pixel represents the smallest dot on the screen that can be individually controlled.

2. What is the difference between em and rem?

Answer:

  • em is a relative unit equal to the computed font size of the element to which it's applied. If the font size of the element is 16px, then 2em would equate to 32px. However, if an element has its font size set to 20px, 2em becomes 40px.
  • rem, on the other hand, is also a relative unit but always refers to the computed font-size of the root element (<html>), regardless of the parent elements' font sizes. This makes rem more predictable across different parts of your webpage.

3. Why might you use em instead of rem?

Answer:
Using em can be beneficial when you want typography scales to be relative to the parent element rather than the root, allowing more flexibility in local adjustments. For example, if you're creating a scalable component or widget where typography should adjust based on the context or container's font size.

4. How do vh and vw work?

Answer:

  • vh stands for viewport height and represents 1% of the total viewport height.
  • vw stands for viewport width and represents 1% of the total viewport width. For instance, 50vh would cover half the height of the viewport, while 25vw covers a quarter of its width.

5. When should vw and vh be used instead of px?

Answer:
vw and vh are ideal for responsive design as they allow elements to scale dynamically according to the viewport dimensions. Use them when you need elements like images, videos, or containers to take up a specific percentage of the viewport, ensuring consistent visual scaling across devices.

6. Are there any other responsive length units in CSS besides em, rem, vh, and vw?

Answer:
Yes, there are other responsive length units such as:

  • %: Percentages are relative to the containing element.
  • vh, vw, vmin, vmax: These are all viewport units.
  • ch, ex: Ch equals the advance measure (width) of a '0'; Ex is typically the x-height of a font (height of the lowercase letter 'x').
  • fr (fractional unit): Used in CSS Grid Layout, it defines a fraction of the available space in the grid container.
  • vmin, vmax: Represents the smallest or largest viewport dimension (whichever is smaller or larger).

7. What is the difference between em and % for scaling font sizes?

Answer:
Both em and % can be used to scale font sizes relative to the parent element, but their effects can differ:

  • em: As explained, em is based on the element's font size. Nested elements could cause unexpected scaling if the font size changes at each level.
  • %: Percentages directly apply to the font size from the parent, without being affected by any previous scaling down the chain, making it simpler and often easier to comprehend.

8. Can units like em, rem, and vh/vw be mixed in one style rule?

Answer:
Absolutely! Mixing units can be very useful in creating flexible and responsive designs:

  • You might specify padding in rem for consistent spacing based on the root's font size but use vw for the width of a layout container to adapt based on the screen size.
  • Mixing em and vh/vw can provide both typographical scalability and layout responsiveness tailored to individual needs.

9. How do browser zooming affect these units?

Answer:

  • px remains unchanged because it's fixed.
  • em, rem, ch, and similar percentage-based units will scale when the browser zoom level changes because they’re dependent on computed font sizes or percentages of parent/container dimensions.
  • vh and vw units are also affected by browser zooming since they depend on the viewport dimensions, which change with zoom.

10. What are some best practices when using these units?

Answer:

  • Use rem for root-level sizing for consistency across all components.
  • Use em, %, or other relative units within components where scaling should relate directly to the parent size.
  • Viewport units (vh/vw) are best for full-page layouts or media adjustments.
  • Test across devices and zoom levels to ensure all elements work well together under different conditions.
  • Avoid overcomplicating styles. Balance between flexibility and maintainability, sticking to px where precise control is necessary.

You May Like This Related .NET Topic

📥 Download Code ▶️ Watch Online 📖 Read Description

Login to post a comment.