HTML & CSS Interview Question #71

What is the difference between px, %, vw, and vh?

CSS Fundamentals, Selectors, Cascade, Specificity, Box Model, Units & Typography Mid-Level Intermediate

Quick Interview Answer

px is a CSS pixel unit commonly used for precise borders, icons, and other dimensions. Percentage values are relative to a property-specific reference, often the containing block.

Detailed Explanation

px is a CSS pixel unit commonly used for precise borders, icons, and other dimensions. Percentage values are relative to a property-specific reference, often the containing block.

vw and vh represent percentages of the viewport width and height respectively. Viewport units are useful for fluid sizing, but full-height mobile layouts need care because browser interface elements can affect the visible viewport; modern CSS also provides small, large, and dynamic viewport units for those cases.

Code Example

.container {
    width: 90%;
}

.hero-title {
    font-size: 4vw;
}

.hero {
    min-height: 70vh;
}

.border {
    border-width: 1px;
}