CSS Units & Sizing (Pixels, REM, EM, Viewport & %)

Understanding absolute vs relative CSS units is crucial for creating fluid, responsive user interfaces.

px (Pixels): Absolute unit fixed in physical screen dots. Best for thin borders and small fixed details.

rem (Root EM): Relative to the root <html> font-size (default: 1rem = 16px). Best for typography, padding, and margins!

em: Relative to the font-size of the current element's parent.

% (Percentage): Relative to parent element dimensions.

vw & vh: Viewport Width & Height (100vw = 100% of window width, 100vh = 100% of window height).

⊞Code Example

html {

font-size: 16px; /* 1rem = 16px */

}

.hero-section {

width: 100%;

min-height: 100vh; /* Full screen height */

padding: 2.5rem 1.5rem; /* Responsive spacing */

}

h1 {

font-size: 2.25rem; /* 36px */

}