CSS Height/Width
In this page:
selector {
width: length | percentage | auto;
height: length | percentage | auto;
}height और width Set करना
height और width properties किसी element का size सीधे set करती हैं। इनके बिना, ज़्यादातर elements अपने content के आधार पर खुद को size कर लेते हैं। कोई fixed height या width से overflow होने वाला content को explicit overflow property चाहिए, वरना यह box के बाहर visibly फैल जाएगा।
- किसी width या height को सिर्फ तभी fix करें जब आपको सच में एक specific size चाहिए, content को naturally size तय करने देना अक्सर ज़्यादा simple होता है।
- Accepted values:
- length — fixed size जैसे 200px, 20rem
- percentage — containing block के relative
- auto — browser size calculate करता है (default)
- min-content | max-content | fit-content — content-based sizing
- vw | vh — viewport के relative
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: Setting height and width
<style>
.box {
width: 200px;
height: 100px;
background: lightblue;
}
</style>
<div class="box">Fixed size box</div>min-height और max-height
min-height गारंटी देता है कि कोई element कभी एक certain size से कम shrink नहीं होगा, यहाँ तक कि थोड़े से content के साथ भी, जबकि max-height उसे कभी एक set limit से ज़्यादा लंबा नहीं होने देता।
ये properties खासतौर पर तब उपयोगी हैं जब किसी card या container को अस्थायी रूप से कोई content न होने पर zero height में collapse होने से रोकना हो।
- min-height किसी grid में cards के लिए बहुत अच्छा है, छोटे और लंबे cards को visually एक comfortable baseline height पर aligned रखता है।
- Accepted values:
- length — जैसे 200px या 20rem
- percentage — container के relative
- none — कोई limit नहीं (max-height / max-width की initial value)
- auto — min-height / min-width की initial value
- fit-content / min-content / max-content — content-based sizes
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: min-height and max-height
<style>
.card {
min-height: 100px;
max-height: 200px;
background: lightyellow;
border: 2px solid #cc9900;
padding: 10px;
}
</style>
<div class="card">Never shorter than 100px, never taller than 200px</div>min-width और max-width
min-width किसी element को एक certain width से कम shrink होने से रोकता है, जबकि max-width उसे एक set limit से ज़्यादा wide होने से रोकता है, ये दोनों responsive layouts के लिए बहुत common tools हैं। min-height और max-height के साथ मिलकर, ये चार properties flexible, responsive boxes बनाने का core toolkit बनाती हैं।
- max-width को width: 100% के साथ जोड़ना एक responsive image के लिए classic pattern है जो अपने container से कभी overflow नहीं होती।
- Accepted values:
- length — जैसे 600px या 40rem
- percentage — container की width के relative
- none — कोई maximum नहीं (max-width की initial value)
- auto — min-width की initial value
- fit-content / min-content / max-content — content-based sizes
- calc() / min() / max() / clamp() — computed values
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: min-width and max-width
<style>
.box {
min-width: 150px;
max-width: 400px;
background: lightgreen;
border: 2px solid seagreen;
padding: 10px;
}
</style>
<div class="box">Between 150px and 400px wide</div>Percentage Units
एक percentage height या width element के parent container के size के relative calculate होती है, यानी parent का अपना size directly असर करता है कि percentage value कैसी render होती है।
- Percentage widths responsive columns के लिए बेहद common हैं जिन्हें अपने container के साथ smoothly scale होना चाहिए।
- Accepted values:
- percentage — जैसे 50%; parent के size के relative
- height के लिए — parent की explicit height होनी चाहिए
- width: 100% — parent की content width भर देता है
- auto — browser इसे calculate करता है (initial value)
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: Percentage Units
<style>
.parent {
width: 400px;
background: #ddd;
padding: 10px;
}
.child {
width: 50%;
background: coral;
color: white;
padding: 10px;
}
</style>
<div class="parent">
<div class="child">50% of the 400px parent = 200px</div>
</div>Viewport Units: vh और vw
Viewport units browser window के अपने relative होती हैं, किसी parent element के relative नहीं। 1vh viewport की height का 1% होता है, और 1vw viewport की width का 1% होता है। क्योंकि ये किसी parent element के बजाय viewport के साथ scale होते हैं, vh और vw full-screen hero sections और layouts के लिए popular हैं।
- vh किसी page के पहली बार load होने पर hero section को पूरी visible screen height भरने का एक popular choice है।
- Accepted values:
- vh — viewport height का 1%
- vw — viewport width का 1%
- vmin — smaller viewport dimension का 1%
- vmax — larger viewport dimension का 1%
- dvh / svh / lvh — dynamic, small और large viewport heights
उदाहरण: Viewport Units: vh and vw
<style>
.hero {
height: 100vh;
width: 100vw;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<div class="hero">Fills the full browser viewport</div>- variable text content वाले element पर fixed height set करना, जिससे text overflow हो सकता है।
- यह realize किए बिना percentage height इस्तेमाल करना कि उसके काम करने के लिए parent element की भी defined height चाहिए।
- यह भूल जाना कि min-width और max-width अपनी range से बाहर की किसी plain width value को चुपचाप override कर सकते हैं।
- height और width किसी element का size सीधे set करते हैं, px, %, vh, या vw जैसी units में।
- min-height/max-height और min-width/max-width ऐसी boundaries set करते हैं जिनसे कम कोई element shrink नहीं हो सकता या जिनसे ज़्यादा grow नहीं हो सकता।
- Percentage sizes parent element के relative होती हैं, जबकि vh और vw browser viewport के relative होती हैं।
यहाँ बताई गई सभी standard CSS sizing properties और units हर modern browser में supported हैं।
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: