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

CSS Logical Properties

किसी website को design करने की कल्पना करें। अगर आप सिर्फ English (left-to-right) लिखते हैं, तो आप अपनी सभी margins और padding को left या right align करते हैं। लेकिन अगर आप अपनी site को Arabic या Hebrew (जो right-to-left पढ़ी जाती हैं) में translate करते हैं, तो आपके layouts टूट जाएँगे, क्योंकि borders और spacing गलत side पर रहते हैं। CSS logical properties इस समस्या को solve करती हैं। rigid physical coordinates (जैसे left, right, top, और bottom) इस्तेमाल करने के बजाय, ये block-start, block-end, inline-start, और inline-end जैसी relative directions इस्तेमाल करती हैं। यह आपकी margins, padding, और borders को आपकी webpage की language और text direction के आधार पर automatically flip होने देता है।

In this page:

  1. Logical बनाम Physical Properties
  2. Block और Inline Axes को समझना
  3. Logical Padding और Margin Shorthands
  4. Logical Borders
  5. Logical Dimensions (block-size और inline-size)
Syntax
css 
selector {
  margin-inline: length;
  padding-block: length;
  border-inline-start: width style color;
}

Logical बनाम Physical Properties

Physical properties (जैसे margin-left) सीधे physical screen boundaries से बंधी होती हैं। Logical properties (जैसे margin-inline-start) relative होती हैं, webpage की text direction और writing mode के आधार पर automatically adapt होते हुए।

Note:
  • international languages को natively support करने वाले flexible layouts बनाने के लिए physical properties के बजाय logical properties इस्तेमाल करें।
  • Accepted values:
  • margin-inline-start — LTR में margin-left को replace करता है
  • margin-block-end — margin-bottom को replace करता है
  • padding-inline — left और right padding को replace करता है
  • inset-block-start — top को replace करता है
  • width / height — inline-size / block-size बन जाते हैं
Warning: layout bugs रोकने के लिए एक ही stylesheet में logical और physical properties को mix करने से बचें।

उदाहरण: Logical vs. Physical Properties

css 
<style>
.physical {
  margin-left: 20px;
  background: lightblue;
  padding: 8px;
  margin-bottom: 8px;
}
.logical {
  margin-inline-start: 20px;
  background: lightgreen;
  padding: 8px;
}
</style>
<div class="physical">Always left, regardless of direction</div>
<div class="logical" dir="rtl">Adapts: becomes right in RTL</div>

Block और Inline Axes को समझना

Logical properties दो main axes इस्तेमाल करती हैं: block axis (default रूप से vertical coordinates) और inline axis (default रूप से horizontal coordinates)। Start और end values define करते हैं कि content इन axes के साथ कहाँ शुरू और खत्म होता है।

Note:
  • block को paragraphs stack होने की direction (vertical) की तरह सोचें, और inline को words चलने की direction (horizontal) की तरह।
  • Accepted values:
  • inline axis — जिस direction में text flow होता है
  • block axis — जिस direction में blocks stack होते हैं
  • writing-mode: horizontal-tb — inline horizontal है, block vertical है
  • writing-mode: vertical-rl — inline vertical है, block right से left जाता है
Warning: अगर आप webpage की writing mode को vertical बदलते हैं तो axes automatically rotate हो जाएँगे।

उदाहरण: Understanding Block and Inline Axes

css 
<style>
.box {
  padding-block-start: 10px;
  padding-inline-start: 20px;
  background: lightblue;
  border: 1px solid #99a;
}
</style>
<div class="box">Block = vertical stacking axis, inline = horizontal reading axis</div>

Logical Padding और Margin Shorthands

आप shorthand properties इस्तेमाल करके logical padding और margins declare कर सकते हैं: margin-inline (left और right margins के लिए) और padding-block (top और bottom padding के लिए), अपनी stylesheets को साफ़ और पढ़ने में आसान रखते हुए।

Note:
  • vertical padding set करने के लिए padding-block, और अपने buttons पर horizontal padding set करने के लिए padding-inline इस्तेमाल करें।
  • Accepted values:
  • margin-block: <length> — block axis पर start और end
  • margin-inline: <length> — inline axis पर start और end
  • padding-block | padding-inline — padding के लिए वही
  • margin-inline: auto — horizontally center करता है
Warning: production sites पर deploy करने से पहले सुनिश्चित करें कि आपके browser versions logical shorthands को support करते हैं।

उदाहरण: Logical Padding and Margin Shorthands

css 
<style>
.box {
  margin-inline: 20px;
  padding-block: 10px;
  background: lightblue;
  border: 1px solid #99a;
}
</style>
<div class="box">margin-inline sets left+right, padding-block sets top+bottom</div>

Logical Borders

Logical border properties आपको अपनी text direction के आधार पर borders को dynamically style करने देती हैं। border-block-start (default रूप से top border) और border-inline-start (default रूप से left border) जैसी properties आपके layouts को readable रखने के लिए automatically adapt होती हैं।

Note:
  • अपने alerts और quotes पर vertical accent lines को साफ़ तरीके से style करने के लिए border-inline-start इस्तेमाल करें।
  • Accepted values:
  • border-inline: <width> <style> <color> — दोनों inline sides
  • border-block-start: <...> — एक side
  • border-start-start-radius: <length> — logical corner radius
  • border-inline-end-width: <length> — single logical side
Warning: logical layouts के अंदर standard physical borders लिखना asymmetrical designs का नतीजा दे सकता है।

उदाहरण: Logical Borders

css 
<style>
.alert {
  border-inline-start: 4px solid red;
}
</style>
<div class="alert">Accent border adapts to reading direction</div>

Logical Dimensions (block-size और inline-size)

Logical dimensions physical width और height properties को replace करती हैं। inline-size property horizontal dimension (default रूप से width) control करती है, और block-size property vertical dimension (default रूप से height) control करती है।

Note:
  • vertical reading modes को support करने वाले responsive layouts design करते समय width के बजाय inline-size इस्तेमाल करें।
  • Accepted values:
  • inline-size: <length> — horizontal writing modes में width को replace करता है
  • block-size: <length> — horizontal writing modes में height को replace करता है
  • min-inline-size | max-inline-size — logical min/max width
  • min-block-size | max-block-size — logical min/max height
Warning: inline-size और standard width को mix करना आपकी CSS sheets में element sizes को troubleshoot करना मुश्किल बना सकता है।

उदाहरण: Logical Dimensions (block-size & inline-size)

css 
<style>
.box {
  inline-size: 200px;
  block-size: 100px;
  background: lightblue;
  border: 1px solid #99a;
}
</style>
<div class="box">inline-size = width, block-size = height, by default</div>
Live Example
Related Topics

CSS Logical Sizing · CSS Custom Properties · CSS Subgrid · CSS Container Queries

{# 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 पर physical margins और logical padding को mix करना, layout conflicts पैदा करते हुए।
  2. यह भूल जाना कि block-size और inline-size relative हैं और अगर आप webpage की writing mode बदलें तो rotate हो सकते हैं।
  3. non-standard logical property keys इस्तेमाल करना जिन्हें browsers parse करने में fail हो जाते हैं।
चैप्टर सारांश
  • Logical properties relative directions हैं जो webpage की reading direction के आधार पर automatically adapt होती हैं।
  • Block coordinates vertical stacking flow handle करते हैं, जबकि inline coordinates horizontal text flow handle करते हैं।
  • साफ़, international websites बनाने के लिए physical properties को logical properties (जैसे margin-inline, padding-block, और inline-size) से replace करें।
ब्राउज़र सपोर्ट

Standard CSS logical properties और axis directions हर modern web browser द्वारा natively supported हैं।

🔒

Chapter Quiz — Complete all 25 topics to unlock

0/25 topics done

Complete these topics first:

← Previous Lesson CSS Subgrid Next Lesson → CSS Logical Sizing

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.