CSS Units

Types of CSS Units

🔹 Absolute Units

Absolute units like px (pixels), pt (points), cm, and in have fixed sizes. They are not relative to other elements or viewport. Pixels (px) are the most common absolute unit on screens, providing precise control for borders, shadows, or icon sizes. However, overusing absolute units harms accessibility and responsiveness, as elements won't scale with user preferences or different screens. They are best used for small, fixed decorative elements within a fluid layout system. Print stylesheets often use pt, cm, or in for accurate physical measurements.

🔸 Pixels (px) - Most Common

/* Pixels - precise control */
.header {
    font-size: 24px;
    padding: 20px;
    border: 2px solid #333;
}

.button {
    width: 120px;
    height: 40px;
}

🔹 Relative Units

Relative units scale based on another property, making them essential for responsive and accessible design. em and rem scale with font size. Percentages (%) scale with parent dimensions. Viewport units (vw, vh) scale with browser window size. These units allow layouts to adapt to different screen sizes, user font preferences, and zoom levels. They create more flexible and inclusive experiences than fixed pixels. Modern units like ch (character width) and lh (line height) solve specific typographic challenges. Using relative units is a cornerstone of modern CSS best practices.

🔸 Em Units (em)

/* Em - relative to parent font size */
.parent {
    font-size: 16px;
}

.child {
    font-size: 1.5em;    /* 24px (16px × 1.5) */
    padding: 0.5em;      /* 12px (24px × 0.5) */
    margin: 1em;         /* 24px (24px × 1) */
}

🔸 Rem Units (rem)

/* Rem - relative to root font size */
html {
    font-size: 16px;     /* Root font size */
}

.title {
    font-size: 2rem;     /* 32px (16px × 2) */
}

.text {
    font-size: 1rem;     /* 16px (16px × 1) */
    margin: 1.5rem;      /* 24px (16px × 1.5) */
}

🔹 Percentage Units (%)

Percentage units create fluid layouts by defining values as a fraction of a parent element's property. width: 50% takes half the parent's width. padding-top: 25% (relative to parent width) can create a square aspect ratio. font-size: 120% scales relative to the parent's font size. This relativity is the engine behind responsive grids and flexible components. The key is knowing the reference for each property. Percentages enable intrinsic designs where elements naturally fill available space, reducing the need for complex media queries. They are fundamental to creating layouts that work across a continuum of screen sizes.

/* Percentage - relative to parent */
.container {
    width: 400px;
    height: 200px;
    background: #f0f0f0;
}

.child {
    width: 50%;          /* 200px (400px × 50%) */
    height: 75%;         /* 150px (200px × 75%) */
    background: #007cba;
}

🔹 Viewport Units

Viewport units (vw, vh, vmin, vmax) are relative to the browser window size. 1vw is 1% of the viewport width. They are perfect for full-screen sections (height: 100vh), responsive typography (font-size: 4vw), and elements that should scale directly with viewport size. However, mobile browser UI (address bars) can cause 100vh to be taller than the visible area. New units svh (small viewport height) and lvh (large viewport height) address this. Use viewport units for true viewport-relative sizing but test thoroughly on mobile.

/* Viewport units */
.hero {
    width: 100vw;        /* 100% of viewport width */
    height: 100vh;       /* 100% of viewport height */
}

.sidebar {
    width: 25vw;         /* 25% of viewport width */
    height: 50vh;        /* 50% of viewport height */
}

.responsive-text {
    font-size: 4vw;      /* Font size scales with viewport */
}

🔹 Modern CSS Units

Modern CSS introduces specialized units for component-based and typographic design. Container query units (cqw, cqh) are percentages of a container's size, enabling component-level responsiveness. Line-relative units lh and rlh are perfect for spacing related to text flow. The ch unit (width of "0") is great for limiting line length in monospace or readable prose. For robust viewport sizing, use svh/lvh/dvh to handle mobile UI variations. These units provide more precise, context-aware control than traditional options, aligning with modern component architecture and responsive design needs.

🔸 Character Units (ch)

/* Ch - width of "0" character */
.code-line {
    width: 80ch;         /* Width of 80 characters */
    font-family: monospace;
}

.input-field {
    width: 20ch;         /* Width of 20 characters */
}

🔸 Calc() Function

/* Calc - mathematical calculations */
.flexible-width {
    width: calc(100% - 200px);    /* Full width minus 200px */
}

.centered-content {
    width: calc(50vw + 100px);    /* 50% viewport + 100px */
    margin: calc(2rem + 10px);    /* 2rem plus 10px */
}

🔹 When to Use Each Unit