📘 Lesson · Lesson 19
Width and Height
Width और Height
width and height Basics
.box {
width: 300px;
height: 200px;
}These set the size of the CONTENT area of an element (recall the box model — padding and border add on top by default). Fixed pixel values give exact, unchanging sizes. But here's a key fact from the box model: block elements (like div, p) are ALREADY full-width by default — they stretch to fill their container. So you set width mainly to make something NARROWER than full, and height to make it taller than its content needs.
auto and Percentage — flexible sizing
width: auto; /* default - fills available width (block elements) */
width: 50%; /* half of the parent's width */
width: 100%; /* full width of the parent */auto is the default — the browser decides the size (block elements fill their container's width; height grows to fit content). Percentage is relative to the PARENT, making elements fluid: a
width: 50% column stays half its container on any screen. This is the foundation of responsive layouts — percentage widths let content grow and shrink automatically instead of staying a rigid pixel size that breaks on small screens.min and max — the Size Limits
min-width: 300px; /* never get NARROWER than 300px */
max-width: 800px; /* never get WIDER than 800px */
min-height: 100vh; /* at least full screen tall */
max-height: 400px; /* never taller than 400px (then scroll) */These set LIMITS rather than fixed sizes — and they're incredibly useful. Think of them as guard rails:
max-width: 800px means "be flexible, but never stretch beyond 800px." min-width sets a floor, max-width a ceiling. The element flexes freely between them. This combination — flexible by default, but bounded — is the secret to layouts that look good on every screen size, from phone to giant monitor.max-width for Responsive — the pro pattern
.container {
width: 90%; /* flexible: 90% of the screen */
max-width: 1200px; /* but cap it at 1200px on big screens */
margin: 0 auto; /* and center it */
}Phone (400px wide): container = 90% = 360px (fits nicely)
Laptop (1400px wide): container = capped at 1200px, centered
(doesn't stretch uncomfortably wide)
This three-line combo is one of the most important patterns in all of web design.
width: 90% keeps content flexible and padded from screen edges on mobile; max-width: 1200px stops it stretching too wide on large monitors (text is unreadable when lines are too long); margin: 0 auto centers it. Nearly every professional website wraps its content in exactly this kind of container. Memorise this pattern — you'll use it constantly.The Height Challenge — why height is trickier
/* Setting a fixed height can cause problems: */
.box { height: 200px; } /* content taller than 200px OVERFLOWS! */
/* Usually better to let height be automatic: */
.box { min-height: 200px; } /* at least 200px, grows if needed */An important lesson: avoid fixed
height on content that can vary. If you set height: 200px but the content needs more room, it spills OUT of the box (overflow — its own chapter next). That's why min-height is often safer: it guarantees a minimum but lets the box grow to fit content. The exception is height: 100vh for full-screen hero sections, where you deliberately want exactly one screen. General rule: control width freely, but let height be automatic unless you have a specific reason.Exam Corner
Q: What does width: 50% refer to? 50% of the parent element's width.
Q: Difference between width and max-width? width is a fixed size; max-width is a limit the element won't exceed but can be smaller than.
Q: Write the responsive container pattern.
Q: Why prefer min-height over height often? min-height guarantees a minimum but lets content grow; fixed height can cause overflow.
Q: What does max-width do for readability on large screens? Caps content width so text lines don't get uncomfortably long.
Q: Difference between width and max-width? width is a fixed size; max-width is a limit the element won't exceed but can be smaller than.
Q: Write the responsive container pattern.
width: 90%; max-width: 1200px; margin: 0 auto;Q: Why prefer min-height over height often? min-height guarantees a minimum but lets content grow; fixed height can cause overflow.
Q: What does max-width do for readability on large screens? Caps content width so text lines don't get uncomfortably long.
width और height Basics
.box {
width: 300px;
height: 200px;
}ये element के CONTENT area का size set करते हैं (box model याद कीजिए — padding और border default रूप से ऊपर से जुड़ते हैं). Fixed pixel values exact, न बदलने वाले sizes देते हैं. पर box model से एक अहम बात: block elements (जैसे div, p) default रूप से PEHLE HI full-width हैं — वे अपने container को भरने तक खिंचते हैं. तो आप width मुख्यतः किसी चीज़ को full से NARROWER बनाने को set करते हैं, और height उसे content से ज़्यादा लंबा बनाने को.
auto और Percentage — flexible sizing
width: auto; /* default - available width bhar deta hai (block) */
width: 50%; /* parent ki width ka aadha */
width: 100%; /* parent ki poori width */auto default है — browser size तय करता है (block elements container की width भरते हैं; height content fit होने तक बढ़ती है). Percentage PARENT के सापेक्ष है, elements को fluid बनाते:
width: 50% column किसी भी screen पर अपने container का आधा रहता है. यह responsive layouts की नींव है — percentage widths content को rigid pixel size के बजाय अपने आप बढ़ने-घटने देते हैं जो छोटी screens पर टूट जाता है.min और max - Size की सीमाएं
min-width: 300px; /* 300px se NARROWER kabhi nahi */
max-width: 800px; /* 800px se WIDER kabhi nahi */
min-height: 100vh; /* kam se kam poori screen lambi */
max-height: 400px; /* 400px se lambi nahi (phir scroll) */ये fixed sizes के बजाय सीमाएं set करते हैं — और बेहद उपयोगी हैं. इन्हें guard rails समझिए:
max-width: 800px मतलब "flexible रहो, पर 800px से आगे कभी मत खिंचो." min-width floor set करता है, max-width ceiling. Element उनके बीच freely flex करता है. यह combination — default flexible, पर bounded — हर screen size पर अच्छा दिखने वाले layouts का राज़ है, phone से विशाल monitor तक.Responsive के लिए max-width — pro pattern
.container {
width: 90%; /* flexible: screen ka 90% */
max-width: 1200px; /* par bade screens par 1200px cap */
margin: 0 auto; /* aur center karo */
}Phone (400px chauda): container = 90% = 360px (achhe se fit)
Laptop (1400px chauda): container = 1200px par capped, centered
(asuvidhajanak chauda nahi khinchta)
यह तीन-line combo पूरे web design के सबसे ज़रूरी patterns में से एक है.
width: 90% content को mobile पर flexible और screen किनारों से padded रखता है; max-width: 1200px बड़े monitors पर बहुत चौड़ा खिंचने से रोकता है (lines बहुत लंबी होने पर text पढ़ना मुश्किल); margin: 0 auto center करता है. लगभग हर professional website अपना content ठीक इसी तरह के container में लपेटती है. यह pattern याद कर लीजिए — इसे लगातार use करेंगे.Height की चुनौती — height ज़्यादा मुश्किल क्यों
/* Fixed height set karna problems la sakta hai: */
.box { height: 200px; } /* content 200px se lamba ho to OVERFLOW! */
/* Aksar height automatic rehne dena behtar: */
.box { min-height: 200px; } /* kam se kam 200px, zaroorat par badhta */एक ज़रूरी सबक: बदलने वाले content पर fixed
height से बचिए. अगर height: 200px set करें पर content को ज़्यादा जगह चाहिए, वह box से BAHAR छलकता है (overflow — अगला अपना chapter). इसीलिए min-height अक्सर सुरक्षित है: यह minimum guarantee करता है पर box को content fit होने तक बढ़ने देता है. अपवाद height: 100vh full-screen hero sections के लिए, जहां आप जानबूझकर ठीक एक screen चाहते हैं. General rule: width freely control कीजिए, पर height को automatic रहने दीजिए जब तक कोई खास वजह न हो.Exam Corner
Q: width: 50% किसका है? Parent element की width का 50%.
Q: width और max-width में अंतर? width fixed size है; max-width एक सीमा है जिससे आगे element नहीं जाता पर छोटा हो सकता है.
Q: Responsive container pattern लिखिए.
Q: height पर अक्सर min-height क्यों पसंद? min-height minimum guarantee करता है पर content बढ़ने देता है; fixed height overflow ला सकता है.
Q: बड़ी screens पर readability के लिए max-width क्या करता है? Content width cap करता है ताकि text lines असुविधाजनक लंबी न हों.
Q: width और max-width में अंतर? width fixed size है; max-width एक सीमा है जिससे आगे element नहीं जाता पर छोटा हो सकता है.
Q: Responsive container pattern लिखिए.
width: 90%; max-width: 1200px; margin: 0 auto;Q: height पर अक्सर min-height क्यों पसंद? min-height minimum guarantee करता है पर content बढ़ने देता है; fixed height overflow ला सकता है.
Q: बड़ी screens पर readability के लिए max-width क्या करता है? Content width cap करता है ताकि text lines असुविधाजनक लंबी न हों.
💻 Live Code Editor
इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का
console.log देखने के लिए F12 दबाइए.