← Back to CSS Course | Chapter 9: Modern CSS Features | Lesson 4 of 25

CSS Logical Sizing

CSS Logical Properties left और top जैसी physical directions को inline-start और block-start जैसी flow-relative directions से replace करता है। यह topic उसी idea को दो और areas तक extend करता है: separate top/right/bottom/left declarations के बजाय inset से किसी element को position करना, और physical width और height limits के बजाय block/inline-aware minimum और maximum dimensions से किसी box को size करना।

In this page:

  1. inset Shorthand से Position करना
  2. inset-block और inset-inline के साथ Axis-Specific Positioning
  3. max-block-size और min-block-size से Height Cap और Floor करना
  4. min-inline-size से Overly Narrow Content रोकना
  5. margin-block Variants के साथ Flow-Relative Margins
Syntax
css 
selector {
  inline-size: length;
  block-size: length;
  max-inline-size: length;
}

inset Shorthand से Position करना

inset एक साथ top, right, bottom, और left set करने के बराबर logical shorthand है -- inset: 0 किसी positioned element को उसके containing block को exactly भरने के लिए pin करता है, चारों physical properties को individually लिखने जैसा ही effect देते हुए।

physical offsets की तरह ही, इसे position को relative, absolute, fixed, या sticky set करना ज़रूरी है।

Note:
  • किसी absolutely positioned overlay को उसके पूरे parent container में भरने का एक तेज़, readable तरीका बनाने के लिए inset: 0 इस्तेमाल करें।
  • Accepted values:
  • inset: <length> — जैसे 0 या 10px, top, right, bottom और left set करता है
  • inset: <percentage> — containing block के relative
  • inset: auto — कोई offset नहीं (default)
  • inset: 10px 20px — एक से चार values, top, right, bottom, left order में
  • inset: 0 — किसी absolutely positioned box को उसका container भरने पर मजबूर करता है
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning: default position: static वाले किसी element पर inset का बिल्कुल कोई असर नहीं होता, बिल्कुल वैसे जैसे top और left का भी कोई असर न होता।

उदाहरण: Positioning with the inset Shorthand

css 
<style>
.container {
  position: relative;
  width: 200px;
  height: 100px;
  background: #eee;
  border: 2px dashed #999;
}
.overlay {
  position: absolute;
  inset: 0;
  background: dodgerblue;
  color: white;
}
</style>
<div class="container">
  <div class="overlay">Fills the parent exactly</div>
</div>

inset-block और inset-inline के साथ Axis-Specific Positioning

inset-block block axis के साथ start और end offsets set करता है (default रूप से top और bottom), जबकि inset-inline inline axis के साथ offsets set करता है (default रूप से left और right)।

inset को इन दो axis-specific pairs में split करना तब उपयोगी है जब आप सिर्फ एक flow direction के साथ positioning control करना चाहें और दूसरे axis को untouched छोड़ें।

Note:
  • किसी element को उसकी vertical position को अलग से controlled छोड़ते हुए horizontally edge-to-edge stretch करने के लिए अकेले inset-inline: 0 इस्तेमाल करें।
  • Accepted values:
  • inset-block: <length> — horizontal writing में top और bottom
  • inset-inline: <length> — horizontal writing में left और right
  • inset-block-start | inset-block-end — single sides
  • inset-inline-start | inset-inline-end — single sides
  • auto — कोई offset नहीं (default)
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning: पूरे inset shorthand की तरह ही, inset-block और inset-inline दोनों को असर करने के लिए position को static के अलावा किसी चीज़ पर set करना ज़रूरी है।

उदाहरण: Axis-Specific Positioning with inset-block and inset-inline

css 
<style>
.box {
  position: absolute;
  inset-inline: 0;
  background: crimson;
  color: white;
  padding: 8px;
}
</style>
<div style="position: relative; background: #eee; min-height: 60px;">
  <div class="box">Stretched edge-to-edge horizontally only</div>
</div>

max-block-size और min-block-size से Height Cap और Floor करना

max-block-size और min-block-size max-height और min-height के logical equivalents हैं, किसी element के size को physical vertical axis के बजाय flow-relative block axis के साथ cap या floor करते हुए।

Default horizontal writing mode में वे बिल्कुल अपने physical counterparts जैसे behave करते हैं, लेकिन writing mode vertical में बदलने पर वे automatically width control करने के लिए flip हो जाते हैं।

Note:
  • vertical writing modes को support करने वाले components में, जैसे Japanese-language sites, max-height और min-height के मुकाबले max-block-size और min-block-size prefer करें।
  • Accepted values:
  • max-block-size: <length> | <percentage> — height को cap करता है (horizontal writing में)
  • max-block-size: none — default, कोई cap नहीं
  • min-block-size: <length> | <percentage> — एक floor set करता है
  • min-block-size: 0 — default floor
  • min-content | max-content | fit-content — दोनों properties के लिए content-based sizes
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning: default left-to-right horizontal writing mode में, max-block-size और max-height functionally identical हैं, इसलिए अंतर तब तक invisible है जब तक writing-mode न बदले।

उदाहरण: Capping and Flooring Height with max-block-size and min-block-size

css 
<style>
.card {
  min-block-size: 100px;
  max-block-size: 200px;
  background: lightyellow;
  border: 2px solid #cc9900;
  padding: 10px;
}
</style>
<div class="card">Height capped and floored along the block axis</div>

min-inline-size से Overly Narrow Content रोकना

min-inline-size min-width का logical equivalent है, किसी element को flow-relative inline axis के साथ किसी दिए गए size से narrower shrink होने से रोकते हुए।

यह खासतौर पर flexbox या grid जैसे flexible layouts के अंदर उपयोगी है, जहाँ items वरना अपने ही content या icons को clip करने के point तक shrink हो सकते हैं।

Note:
  • icons या छोटे labels वाले flex items पर min-inline-size set करें ताकि वे कभी इतना छोटा shrink न हों कि किसी cramped flex row में visually टूट जाएँ।
  • Accepted values:
  • min-inline-size: <length> — horizontal writing में width के लिए floor
  • min-inline-size: <percentage> — container के relative
  • min-inline-size: auto — default
  • min-inline-size: 0 — कोई floor नहीं
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning: min-inline-size (या physical min-width) के बिना, flex items default रूप से एक min-content-based floor पर जाते हैं जो फिर भी text या icons को awkwardly overlap करने दे सकता है।

उदाहरण: Preventing Overly Narrow Content with min-inline-size

css 
<style>
.container {
  display: flex;
  gap: 8px;
}
.icon-label {
  min-inline-size: 80px;
  background: steelblue;
  color: white;
  padding: 8px;
}
.container > div:not(.icon-label) {
  background: #ddd;
  padding: 8px;
}
</style>
<div class="container">
  <div class="icon-label">Icon</div>
  <div>Other content</div>
</div>

margin-block Variants के साथ Flow-Relative Margins

margin-block एक declaration में block axis के साथ start और end margins set करता है, जबकि margin-block-start और margin-block-end individually सिर्फ एक side target करते हैं -- margin-top और margin-bottom के logical equivalents।

left/right spacing के लिए पहले से इस्तेमाल हो रही margin-inline family के साथ मिलकर, यह एक पूरी तरह writing-mode-aware margin system complete करता है।

Note:
  • किसी भी component में जिसे right-to-left या vertical writing modes को support करना है, margin-top और margin-bottom के बजाय margin-block-start और margin-block-end इस्तेमाल करें।
  • Accepted values:
  • margin-block: <length> | <percentage> — दोनों block sides
  • margin-block-start: <length> — horizontal writing में top
  • margin-block-end: <length> — horizontal writing में bottom
  • margin-block: auto — free space absorb करता है, जैसे flex या grid items centering
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning: margin-block एक साथ start और end margin दोनों को एक ही value set करता है; अगर दोनों sides को अलग values चाहिए तो individual margin-block-start या margin-block-end इस्तेमाल करें।

उदाहरण: Flow-Relative Margins with margin-block Variants

css 
<style>
.box {
  margin-block: 20px;
  background: lightyellow;
  border: 1px solid #ccc;
  padding: 8px;
}
.box2 {
  margin-block-start: 10px;
  margin-block-end: 30px;
  background: lightblue;
  border: 1px solid #99c;
  padding: 8px;
}
</style>
<div class="box">Same top and bottom margin</div>
<div class="box2">Different top and bottom margin</div>
Live Example
Related Topics

CSS Logical Properties · CSS Box Sizing · CSS Writing Modes · CSS Subgrid

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. एक ही element पर inset को individual top/left declarations के साथ mix करना, जो confusing, predict करने में मुश्किल overrides बना सकता है।
  2. यह मान लेना कि min-inline-size का मतलब हमेशा एक minimum horizontal size है, जबकि यह किसी vertical writing mode में automatically vertical में flip हो जाता है।
  3. यह भूल जाना कि inset को असर करने के लिए position को static के अलावा किसी चीज़ पर set होना चाहिए, बिल्कुल physical top/right/bottom/left properties की तरह।
चैप्टर सारांश
  • inset top, right, bottom, और left को combine करने का logical shorthand है, inset-block और inset-inline axis-specific control देते हुए।
  • max-block-size और min-block-size physical height के बजाय flow-relative block axis के साथ किसी element का size cap और floor करते हैं।
  • min-inline-size flow-relative inline axis पर content को बहुत ज़्यादा shrink होने से बचाता है, physical min-width property को mirror करते हुए।
ब्राउज़र सपोर्ट

inset और margin-block/-inline logical sizing properties हर modern browser में supported हैं; हमेशा specifically writing-mode: vertical-rl pages test करें, क्योंकि वहीं logical और physical axes असल में अलग होते हैं।

🔒

Chapter Quiz — Complete all 25 topics to unlock

0/25 topics done

Complete these topics first:

← Previous Lesson CSS Logical Properties Next Lesson → CSS Writing Modes

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.