📘 Lesson · Lesson 08
CSS Units: px, em, rem, %
CSS Units: px, em, rem, %
Absolute vs Relative — the big divide
Every size in CSS needs a UNIT —
16px, 2em, 50%. Units split into two families: absolute (a fixed size that never changes, like px) and relative (a size calculated FROM something else, like em from font size or % from the parent). Understanding this split is the key to responsive design: relative units bend and adapt to different screens; absolute units stay rigid. Modern CSS leans heavily on relative units for exactly this reason.px — the Absolute Unit
h1 { font-size: 32px; }
.box { width: 300px; padding: 20px; }px (pixels) is the absolute, dependable unit —
20px is always exactly 20 pixels, everywhere, regardless of anything else. This predictability makes it great for things that should NOT scale: borders (1px solid), small fixed spacing, precise details. The downside: it ignores the user's own font-size preferences and doesn't adapt to context. Perfect for borders and fine details; less ideal for font sizes and layouts that should flex.em and rem — Relative to Font Size
/* rem = relative to the ROOT (html) font size, usually 16px */
html { font-size: 16px; }
h1 { font-size: 2rem; } → 2 × 16 = 32px
p { font-size: 1rem; } → 1 × 16 = 16px
/* em = relative to the CURRENT element's font size */
.card { font-size: 20px; }
.card .label { font-size: 0.8em; } → 0.8 × 20 = 16pxrem vs em — the key distinction:
rem is always relative to the ROOT font size (the html element) — consistent and predictable everywhere. em is relative to the CURRENT element's font size — which can compound confusingly when nested. The modern best practice: use rem for font sizes. Why? If a user increases their browser's default font size (for accessibility), everything in rem scales up proportionally — your site respects their choice. This is a genuine accessibility win that px can't offer.% — Relative to the Parent
.container { width: 600px; }
.container .box { width: 50%; } → 50% of 600 = 300px
/* If the container shrinks, the box shrinks with it */Percentage is relative to the PARENT element's size. width: 50% means "half of whatever contains me." This is fundamental to fluid layouts: a column set to width: 33% stays one-third of its container whether that's on a wide desktop or a narrow phone. Percentages are most common for widths and layout sizing — they let elements grow and shrink with their container automatically.
vw and vh — Relative to the Screen
.hero { height: 100vh; } → 100% of the viewport HEIGHT (full screen tall)
.banner { width: 100vw; } → 100% of the viewport WIDTH (full screen wide)
h1 { font-size: 5vw; } → 5% of the screen width (scales with screen)vw (viewport width) and vh (viewport height) are relative to the SCREEN size:
1vw = 1% of the browser window's width, 1vh = 1% of its height. The classic use is height: 100vh for a hero section that fills exactly one full screen, no matter the device. These units are pure responsive magic — sizes that automatically track the screen. (You met vw briefly in the HTML responsive-images chapter.)Which Unit When — the practical guide
| Unit | Relative to | Best for |
|---|---|---|
| px | Nothing (absolute) | Borders, fine fixed details |
| rem | Root font size | Font sizes, consistent spacing |
| em | Current font size | Padding relative to text size |
| % | Parent size | Widths, fluid layouts |
| vw / vh | Screen size | Full-screen sections, hero areas |
Simple starter strategy: use
rem for font sizes, px for borders, % for layout widths, and vh for full-height sections. Don't overthink it early on — these four cover almost everything. As you build more, the right unit will start to feel obvious.Absolute vs Relative — बड़ा बंटवारा
CSS में हर size को एक UNIT चाहिए —
16px, 2em, 50%. Units दो परिवारों में बंटते हैं: absolute (तय size जो कभी नहीं बदलता, जैसे px) और relative (किसी और चीज़ से calculate हुआ size, जैसे em font size से या % parent से). यह बंटवारा समझना responsive design की चाबी है: relative units अलग screens के अनुसार मुड़ते-ढलते हैं; absolute units कठोर रहते हैं. Modern CSS इसी वजह से relative units पर खूब झुकती है.px - Absolute Unit
h1 { font-size: 32px; }
.box { width: 300px; padding: 20px; }px (pixels) absolute, भरोसेमंद unit है —
20px हमेशा ठीक 20 pixels, हर जगह, किसी और चीज़ से बेपरवाह. यह predictability उन चीज़ों के लिए बढ़िया है जिन्हें scale NAHI होना चाहिए: borders (1px solid), छोटी fixed spacing, precise details. नुकसान: यह user की अपनी font-size पसंद ignore करता है और context के अनुसार नहीं ढलता. Borders और बारीक details के लिए perfect; font sizes और flex होने वाले layouts के लिए कम ideal.em और rem - Font Size के सापेक्ष
/* rem = ROOT (html) font size ke sapeksh, aksar 16px */
html { font-size: 16px; }
h1 { font-size: 2rem; } → 2 × 16 = 32px
p { font-size: 1rem; } → 1 × 16 = 16px
/* em = CURRENT element ki font size ke sapeksh */
.card { font-size: 20px; }
.card .label { font-size: 0.8em; } → 0.8 × 20 = 16pxrem vs em — मुख्य फर्क:
rem हमेशा ROOT font size (html element) के सापेक्ष — हर जगह consistent और predictable. em CURRENT element की font size के सापेक्ष — जो nested होने पर उलझाने वाला compound हो सकता है. Modern best practice: font sizes के लिए rem use कीजिए. क्यों? अगर user अपने browser की default font size बढ़ाए (accessibility के लिए), rem में सब कुछ अनुपात में बड़ा होता है — आपकी site उनकी पसंद का सम्मान करती है. यह असली accessibility जीत है जो px नहीं दे सकता.% - Parent के सापेक्ष
.container { width: 600px; }
.container .box { width: 50%; } → 600 ka 50% = 300px
/* Container chhota ho to box bhi chhota ho jata hai */Percentage PARENT element के size के सापेक्ष है. width: 50% मतलब "जो मुझे रखता है उसका आधा." यह fluid layouts के लिए बुनियादी है: width: 33% set एक column अपने container का एक-तिहाई रहता है चाहे वह चौड़े desktop पर हो या तंग phone पर. Percentages widths और layout sizing के लिए सबसे common हैं — elements अपने container के साथ अपने आप बढ़ते-घटते हैं.
vw और vh - Screen के सापेक्ष
.hero { height: 100vh; } → viewport HEIGHT ka 100% (poori screen lambi)
.banner { width: 100vw; } → viewport WIDTH ka 100% (poori screen chaudi)
h1 { font-size: 5vw; } → screen width ka 5% (screen ke saath scale)vw (viewport width) और vh (viewport height) SCREEN size के सापेक्ष हैं:
1vw = browser window की width का 1%, 1vh = उसकी height का 1%. Classic इस्तेमाल height: 100vh उस hero section के लिए जो ठीक एक पूरी screen भरे, चाहे कोई भी device हो. ये units शुद्ध responsive जादू हैं — sizes जो अपने आप screen को track करते हैं. (vw आपने HTML responsive-images chapter में संक्षेप में देखा.)कौन-सा Unit कब — practical guide
| Unit | किसके सापेक्ष | Best for |
|---|---|---|
| px | कुछ नहीं (absolute) | Borders, बारीक fixed details |
| rem | Root font size | Font sizes, consistent spacing |
| em | Current font size | Text size के सापेक्ष padding |
| % | Parent size | Widths, fluid layouts |
| vw / vh | Screen size | Full-screen sections, hero areas |
सरल starter strategy: font sizes के लिए
rem, borders के लिए px, layout widths के लिए %, और full-height sections के लिए vh. शुरू में ज़्यादा मत सोचिए — ये चार लगभग सब कुछ cover करते हैं. जैसे-जैसे ज़्यादा बनाएंगे, सही unit अपने आप ज़ाहिर लगने लगेगा.💻 Live Code Editor
इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का
console.log देखने के लिए F12 दबाइए.