|

CSS 3 💻 units

Bykronos

CSS units are used to specify various properties like width, height, margin, padding, font-size, and more. Choosing the right unit is essential for creating responsive and accessible designs.

Overview of CSS Units

CategoryUnitsDescription
Absolutepx, cm, mm, in, pt, pcFixed size, not responsive
Relative (font)em, rem, ex, ch, lh, rlhRelative to font size or line height
Relative (viewport)vw, vh, vmin, vmaxRelative to the viewport size
Relative (container)%Relative to the parent element
Anglesdeg, rad, grad, turnFor rotations and gradients
GridfrFractional unit for CSS Grid

1. Absolute Units

Absolute units have fixed sizes and do not scale with the viewport or font size.

UnitFull NameEquivalentUse Case
pxPixels1/96th of an inchMost common for screen design
cmCentimeters1cm = 37.8pxPrint styles
mmMillimeters1mm = 3.78pxPrint styles
inInches1in = 96pxPrint styles
ptPoints1pt = 1/72nd of an inchPrint styles, typography
pcPicas1pc = 12ptPrint styles
.box {
    width: 200px;
    padding: 10px;
    border: 2px solid black;
    font-size: 14pt;
}

When to use: When you need fixed, predictable sizing that doesn’t change (e.g., borders, print styles).

2. Relative (Font-Based) Units

These units are relative to font sizes, making them great for typography and accessibility.

UnitDescriptionExample
emRelative to the current element’s font size2em = 2 × current font size
remRelative to the root element’s (<html>) font size2rem = 2 × root font size
exRelative to the x-height of the fontApproximately 0.5 of font size
chWidth of the ‘0’ character in the fontUseful for text width limits
lhRelative to the line height of the element2lh = 2 × line height
rlhRelative to the root line height2rlh = 2 × root line height
html {
    font-size: 16px; /* Base font size: 1rem = 16px */
}

h1 {
    font-size: 2.5em; /* 2.5 × 16px = 40px */
}

p {
    line-height: 1.6; /* 1.6 × font size */
}

.container {
    padding: 1rem; /* 16px */
    max-width: 60ch; /* Approximately 60 characters wide */
}

em vs rem:

  • em is relative to the parent element’s font size — can cause compounding issues
  • rem is relative to the root (<html>) font size — more predictable
/* Example of em compounding */
div {
    font-size: 1.2em; /* 1.2 × parent */
}

/* Example of rem consistency */
div {
    font-size: 1.2rem; /* 1.2 × root (16px = 19.2px) */
}

3. Relative (Viewport) Units

These units are relative to the viewport (browser window) size.

UnitDescriptionExample
vw1% of viewport width50vw = 50% of screen width
vh1% of viewport height50vh = 50% of screen height
vmin1% of the smaller dimensionUseful for mobile
vmax1% of the larger dimensionUseful for desktop
.hero {
    height: 100vh; /* Full viewport height */
    width: 100vw; /* Full viewport width */
}

.text {
    font-size: 5vw; /* Scales with viewport width */
}

.square {
    width: 50vmin; /* 50% of the smaller dimension */
    height: 50vmin;
}

4. Relative (Parent) Unit — Percentage (%)

Percentage is relative to the parent element’s size.

.container {
    width: 80%; /* 80% of parent's width */
    margin: 0 auto; /* Auto margins for centering */
}

.child {
    width: 50%; /* 50% of .container's width */
    padding: 10%; /* 10% of parent's width */
}

5. Angle Units

Used for rotations, gradients, and transformations.

UnitDescriptionExample
degDegrees (360° = full circle)transform: rotate(45deg)
radRadians (2π = full circle)transform: rotate(3.14rad)
gradGradians (400 = full circle)transform: rotate(100grad)
turnTurns (1 = full circle)transform: rotate(0.5turn)
.spinner {
    transform: rotate(360deg);
    transition: transform 2s;
}

.gradient {
    background: linear-gradient(45deg, red, blue);
}

6. Grid Unit — fr

The fr (fraction) unit is used in CSS Grid to distribute available space.

.grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    /* 1:2:1 ratio */
    gap: 10px;
}

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Units</title>
    <style>
        /* ====== ROOT SETUP ====== */
        html {
            font-size: 16px; /* 1rem = 16px */
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 20px;
            background: #f8f9fa;
            line-height: 1.6;
        }

        /* ====== SECTION STYLING ====== */
        section {
            background: white;
            padding: 1.5rem;
            margin: 1.5rem 0;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        h1 {
            color: #007bff;
            border-bottom: 3px solid #007bff;
            padding-bottom: 0.5rem;
        }

        h2 {
            color: #28a745;
            border-left: 4px solid #28a745;
            padding-left: 1rem;
        }

        .demo-box {
            background: #e9ecef;
            padding: 1rem;
            border-radius: 4px;
            margin: 0.5rem 0;
        }

        .code-block {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 1rem;
            border-radius: 4px;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            margin: 0.5rem 0;
        }

        /* ====== UNIT DEMONSTRATIONS ====== */

        /* ---- Absolute Units ---- */
        .absolute-demo {
            width: 300px;
            height: 100px;
            background: #007bff;
            color: white;
            padding: 10px;
            border: 2px solid #0056b3;
            border-radius: 4px;
        }

        /* ---- Percentage ---- */
        .percent-demo {
            width: 80%;
            max-width: 600px;
            background: #28a745;
            color: white;
            padding: 1rem;
            border-radius: 4px;
        }

        .percent-child {
            width: 50%;
            background: #1e7e34;
            padding: 0.5rem;
            border-radius: 4px;
            text-align: center;
        }

        /* ---- EM & REM ---- */
        .em-demo {
            font-size: 1.2em;
            padding: 1em;
            background: #ffc107;
            border-radius: 4px;
        }

        .em-child {
            font-size: 1.5em;
            padding: 0.5em;
            background: #e0a800;
            border-radius: 4px;
        }

        .rem-demo {
            font-size: 1.2rem;
            padding: 1rem;
            background: #6c5ce7;
            color: white;
            border-radius: 4px;
        }

        .rem-child {
            font-size: 1.5rem;
            padding: 0.5rem;
            background: #4a2a9e;
            border-radius: 4px;
        }

        /* ---- Viewport Units ---- */
        .viewport-demo {
            height: 30vh;
            width: 50vw;
            min-height: 100px;
            min-width: 200px;
            background: linear-gradient(135deg, #dc3545, #c92a2a);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            font-weight: bold;
        }

        /* ---- ch Unit ---- */
        .ch-demo {
            max-width: 60ch;
            background: #17a2b8;
            color: white;
            padding: 1rem;
            border-radius: 4px;
            margin: 0.5rem 0;
        }

        /* ---- Angle Units ---- */
        .angle-demo {
            width: 100px;
            height: 100px;
            background: #ffc107;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            margin: 0.5rem;
            transition: transform 0.5s;
        }

        .angle-demo:hover {
            transform: rotate(45deg);
        }

        /* ---- Grid with fr ---- */
        .grid-demo {
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;
            gap: 10px;
            background: #e9ecef;
            padding: 1rem;
            border-radius: 4px;
        }

        .grid-demo > div {
            background: #007bff;
            color: white;
            padding: 1rem;
            text-align: center;
            border-radius: 4px;
        }

        .grid-demo > div:nth-child(2) {
            background: #28a745;
        }

        .grid-demo > div:nth-child(3) {
            background: #dc3545;
        }

        /* ---- Combined Responsive Example ---- */
        .responsive-box {
            width: 80%;
            max-width: 600px;
            margin: 1rem auto;
            padding: 1.5rem;
            background: #f8f9fa;
            border: 2px solid #007bff;
            border-radius: 8px;
            text-align: center;
        }

        .responsive-box h3 {
            font-size: clamp(1.2rem, 4vw, 2.5rem);
            margin: 0 0 0.5rem 0;
        }

        .responsive-box p {
            font-size: 1rem;
            line-height: 1.6;
        }

        .responsive-box img {
            width: 100%;
            max-width: 400px;
            height: auto;
            border-radius: 4px;
        }
    </style>
</head>
<body>

    <h1>CSS Units</h1>

    <!-- ====== 1. ABSOLUTE UNITS ====== -->
    <section>
        <h2>1. Absolute Units (px)</h2>
        <div class="absolute-demo">
            <strong>Width: 300px</strong><br>
            Height: 100px<br>
            Border: 2px
        </div>
        <p><small>Fixed size — does not scale with font size or viewport.</small></p>
    </section>

    <!-- ====== 2. PERCENTAGE ====== -->
    <section>
        <h2>2. Percentage (%)</h2>
        <div class="percent-demo">
            <strong>Parent: width: 80% of container</strong>
            <div class="percent-child">
                Child: width: 50% of parent
            </div>
        </div>
        <p><small>Relative to the parent element's size.</small></p>
    </section>

    <!-- ====== 3. EM ====== -->
    <section>
        <h2>3. em — Relative to Current Font Size</h2>
        <div class="em-demo" style="font-size: 16px;">
            <strong>Parent font-size: 16px</strong> (1.2em = 19.2px)
            <div class="em-child">
                <strong>Child font-size: 1.5em</strong> (1.5 × 19.2px = 28.8px)
            </div>
            <p style="font-size: 0.8em; padding: 0.5em; background: #d39e00; border-radius: 4px;">
                This text uses 0.8em (relative to parent)
            </p>
        </div>
        <p><small>⚠️ <code>em</code> compounds — each nested level multiplies the font size.</small></p>
    </section>

    <!-- ====== 4. REM ====== -->
    <section>
        <h2>4. rem — Relative to Root Font Size</h2>
        <div class="rem-demo" style="font-size: 16px;">
            <strong>Root font-size: 16px</strong> (1.2rem = 19.2px)
            <div class="rem-child">
                <strong>Child font-size: 1.5rem</strong> (1.5 × 16px = 24px)
            </div>
            <p style="font-size: 0.8rem; padding: 0.5rem; background: #3a1a7e; border-radius: 4px;">
                This text uses 0.8rem (always relative to root)
            </p>
        </div>
        <p><small>✅ <code>rem</code> is consistent — always relative to the root font size.</small></p>
    </section>

    <!-- ====== 5. VIEWPORT UNITS ====== -->
    <section>
        <h2>5. Viewport Units (vw, vh)</h2>
        <div class="viewport-demo">
            <div>
                <strong>30vh × 50vw</strong><br>
                (min 100px × 200px)
            </div>
        </div>
        <p><small>Relative to the viewport (browser window) size.</small></p>
    </section>

    <!-- ====== 6. ch UNIT ====== -->
    <section>
        <h2>6. ch — Character Width</h2>
        <div class="ch-demo">
            <strong>max-width: 60ch</strong>
            <p style="margin-top: 0.5rem;">
                This text is limited to approximately 60 characters per line,
                which improves readability. Lorem ipsum dolor sit amet,
                consectetur adipiscing elit.
            </p>
        </div>
        <p><small>1<code>ch</code> ≈ the width of the '0' character.</small></p>
    </section>

    <!-- ====== 7. ANGLE UNITS ====== -->
    <section>
        <h2>7. Angle Units (deg, turn, rad, grad)</h2>
        <div style="display: flex; flex-wrap: wrap; gap: 10px;">
            <div class="angle-demo" style="transform: rotate(0deg);">
                0deg
            </div>
            <div class="angle-demo" style="transform: rotate(45deg);">
                45deg
            </div>
            <div class="angle-demo" style="transform: rotate(90deg);">
                90deg
            </div>
            <div class="angle-demo" style="transform: rotate(0.25turn);">
                0.25turn
            </div>
            <div class="angle-demo" style="transform: rotate(0.5turn);">
                0.5turn
            </div>
        </div>
        <p><small>Hover over any box to rotate it 45 degrees.</small></p>
    </section>

    <!-- ====== 8. GRID — fr ====== -->
    <section>
        <h2>8. Grid: fr (Fractional Unit)</h2>
        <div class="grid-demo">
            <div>1fr</div>
            <div>2fr</div>
            <div>1fr</div>
        </div>
        <p><small>Columns are in ratio <strong>1:2:1</strong> using <code>fr</code> units.</small></p>
    </section>

    <!-- ====== 9. RESPONSIVE EXAMPLE ====== -->
    <section>
        <h2>9. Responsive Example</h2>
        <div class="responsive-box">
            <h3>Responsive Typography</h3>
            <p>
                This heading uses <code>clamp()</code> for responsive font sizing.
                The image scales to fit the container using <code>max-width: 100%</code>.
            </p>
            <img src="https://via.placeholder.com/600x200/007bff/ffffff?text=Responsive+Image" alt="Example Image">
            <p style="font-size: 0.9rem; color: #6c757d; margin-top: 0.5rem;">
                Image uses <code>width: 100%; max-width: 400px;</code>
            </p>
        </div>
    </section>

    <!-- ====== REFERENCE TABLE ====== -->
    <section>
        <h2>10. Units Reference</h2>

        <h3>Absolute Units</h3>
        <table style="width: 100%; border-collapse: collapse; margin: 10px 0;">
            <tr style="background: #007bff; color: white;">
                <th style="padding: 8px; border: 1px solid #ddd;">Unit</th>
                <th style="padding: 8px; border: 1px solid #ddd;">Description</th>
            </tr>
            <tr><td style="padding: 8px; border: 1px solid #ddd;"><code>px</code></td><td style="padding: 8px; border: 1px solid #ddd;">1/96th of an inch</td></tr>
            <tr><td style="padding: 8px; border: 1px solid #ddd;"><code>cm</code></td><td style="padding: 8px; border: 1px solid #ddd;">Centimeters (1cm = 37.8px)</td></tr>
            <tr><td style="padding: 8px; border: 1px solid #ddd;"><code>mm</code></td><td style="padding: 8px; border: 1px solid #ddd;">Millimeters (1mm = 3.78px)</td></tr>
            <tr><td style="padding: 8px; border: 1px solid #ddd;"><code>in</code></td><td style="padding: 8px; border: 1px solid #ddd;">Inches (1in = 96px)</td></tr>
            <tr><td style="padding: 8px; border: 1px solid #ddd;"><code>pt</code></td><td style="padding: 8px; border: 1px solid #ddd;">Points (1pt = 1/72in)</td></tr>
            <tr><td style="padding: 8px; border: 1px solid #ddd;"><code>pc</code></td><td style="padding: 8px; border: 1px solid #ddd;">Picas (1pc = 12pt)</td></tr>
        </table>

        <h3>Relative Units</h3>
        <table style="width: 100%; border-collapse: collapse; margin: 10px 0;">
            <tr style="background: #28a745; color: white;">
                <th style="padding: 8px; border: 1px solid #ddd;">Unit</th>
                <th style="padding: 8px; border: 1px solid #ddd;">Relative To</th>
            </tr>
            <tr><td style="padding: 8px; border: 1px solid #ddd;"><code>%</code></td><td style="padding: 8px; border: 1px solid #ddd;">Parent element</td></tr>
            <tr><td style="padding: 8px; border: 1px solid #ddd;"><code>em</code></td><td style="padding: 8px; border: 1px solid #ddd;">Current element's font size</td></tr>
            <tr><td style="padding: 8px; border: 1px solid #ddd;"><code>rem</code></td><td style="padding: 8px; border: 1px solid #ddd;">Root element's font size</td></tr>
            <tr><td style="padding: 8px; border: 1px solid #ddd;"><code>vw</code></td><td style="padding: 8px; border: 1px solid #ddd;">Viewport width (1% = 1% of viewport width)</td></tr>
            <tr><td style="padding: 8px; border: 1px solid #ddd;"><code>vh</code></td><td style="padding: 8px; border: 1px solid #ddd;">Viewport height (1% = 1% of viewport height)</td></tr>
            <tr><td style="padding: 8px; border: 1px solid #ddd;"><code>vmin</code></td><td style="padding: 8px; border: 1px solid #ddd;">Smaller of vw and vh</td></tr>
            <tr><td style="padding: 8px; border: 1px solid #ddd;"><code>vmax</code></td><td style="padding: 8px; border: 1px solid #ddd;">Larger of vw and vh</td></tr>
            <tr><td style="padding: 8px; border: 1px solid #ddd;"><code>ch</code></td><td style="padding: 8px; border: 1px solid #ddd;">Width of the '0' character</td></tr>
            <tr><td style="padding: 8px; border: 1px solid #ddd;"><code>ex</code></td><td style="padding: 8px; border: 1px solid #ddd;">x-height of the font</td></tr>
            <tr><td style="padding: 8px; border: 1px solid #ddd;"><code>fr</code></td><td style="padding: 8px; border: 1px solid #ddd;">Available space in CSS Grid</td></tr>
        </table>

        <h3>Angle Units</h3>
        <table style="width: 100%; border-collapse: collapse; margin: 10px 0;">
            <tr style="background: #dc3545; color: white;">
                <th style="padding: 8px; border: 1px solid #ddd;">Unit</th>
                <th style="padding: 8px; border: 1px solid #ddd;">Description</th>
            </tr>
            <tr><td style="padding: 8px; border: 1px solid #ddd;"><code>deg</code></td><td style="padding: 8px; border: 1px solid #ddd;">Degrees (360 = full circle)</td></tr>
            <tr><td style="padding: 8px; border: 1px solid #ddd;"><code>rad</code></td><td style="padding: 8px; border: 1px solid #ddd;">Radians (2π = full circle)</td></tr>
            <tr><td style="padding: 8px; border: 1px solid #ddd;"><code>grad</code></td><td style="padding: 8px; border: 1px solid #ddd;">Gradians (400 = full circle)</td></tr>
            <tr><td style="padding: 8px; border: 1px solid #ddd;"><code>turn</code></td><td style="padding: 8px; border: 1px solid #ddd;">Turns (1 = full circle)</td></tr>
        </table>
    </section>

</body>
</html>

Quick Reference

CategoryUnitsDescription
Absolutepx, cm, mm, in, pt, pcFixed size, not responsive
Relative (font)em, rem, ex, ch, lh, rlhRelative to font or line height
Relative (viewport)vw, vh, vmin, vmaxRelative to viewport size
Relative (parent)%Relative to parent element
Angledeg, rad, grad, turnFor rotations and gradients
GridfrFractional unit for CSS Grid

Best Practices

✅ Do This:

/* Use rem for typography */
html { font-size: 16px; }
h1 { font-size: 2rem; }  /* 32px */
p { font-size: 1rem; }   /* 16px */

/* Use em for component-based spacing */
.card {
    padding: 1.5em;  /* Relative to card's font size */
}

/* Use vw/vh for full-screen sections */
.hero {
    height: 100vh;
    min-height: 500px;
}

/* Use ch for readable text */
.article {
    max-width: 65ch;  /* Optimal reading width */
}

/* Use % for fluid layouts */
.container {
    width: 90%;
    max-width: 1200px;
}

❌ Don’t Do This:

/* Don't use px for font sizes */
p { font-size: 16px; }  /* Doesn't scale with user preferences */

/* Don't use vw for body text */
body { font-size: 2vw; }  /* Too small on mobile, too large on desktop */

/* Don't overuse em for nesting */
ul { font-size: 0.9em; }  /* Can cause compounding issues */
ul ul { font-size: 0.9em; }  /* Even smaller */

Pro Tip: A common best practice is to use rem for typography (font sizes, spacing), % for layout (widths, heights), em for component-based spacing, and vw/vh for full-screen or viewport-dependent elements. Use ch for readable text widths (approximately 60–70 characters per line is optimal for readability).

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!