CSS Units Guide - johnverz22/webdev1-lessons GitHub Wiki

Categories

Absolute Units

These units are fixed and do not change based on screen size or parent elements.

Unit Description
px Pixels - the most commonly used fixed-size unit
cm Centimeters
mm Millimeters
in Inches
pt Points (1/72 of an inch, mainly used in print)
pc Picas (1/6 of an inch, used in typography)

Relative Units

Relative units change depending on their context, such as the parent element or viewport.

Unit Description
% Percentage - relative to the parent element
em Relative to the element's font size
rem Relative to the root element's font size
vw Viewport width - 1vw is 1% of the viewport width
vh Viewport height - 1vh is 1% of the viewport height
vmin The smaller of vw and vh
vmax The larger of vw and vh
dvw Dynamic viewport width - accounts for browser UI changes
dvh Dynamic viewport height - accounts for browser UI changes

Practical Example

This box demonstrates viewport-based scaling:

<div class="example-box">50vw x 20vh</div>
.example-box {
    width: 50vw;
    height: 20vh;
    background: lightblue;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 20px auto;
    border-radius: 10px;
}

This box will resize dynamically based on the viewport dimensions.

⚠️ **GitHub.com Fallback** ⚠️