CSS Inline-block

एक toy train track बनाने की कल्पना करें। अगर आप standard block elements इस्तेमाल करते हैं, तो हर piece एक भारी cargo box की तरह behave करता है—यह हमेशा एक बिल्कुल नई line माँगता है और vertically stack होता है। अगर आप standard inline elements इस्तेमाल करते हैं, तो वे flat stickers की तरह behave करते हैं—वे एक ही line पर साथ-साथ बैठते हैं, लेकिन आप उनकी thickness, width, या height adjust नहीं कर सकते। CSS inline-block वह hybrid solution है। यह एक ऐसे sticker की तरह behave करता है जो बाकी text के साथ साथ-साथ बैठता है, लेकिन आपको उसकी exact width, height, margins, और padding को एक भारी cargo box की तरह customize करने देता है।

In this page:

display: inline-block को समझना
Navigation Menus बनाना
HTML Whitespace Gap को Handle करना
Vertical Alignment Options
Inline-block बनाम Flexbox

Syntax

css

selector {
  display: inline-block;
  width: length;
  height: length;
}

display: inline-block को समझना

inline-block value inline और block elements दोनों की properties combine करती है। यह elements को inline elements की तरह एक ही line पर साथ-साथ बैठने देती है, जबकि block elements की तरह width, height, margin, और padding settings का सम्मान करती है।

Note:

clickable navigation links, buttons, या card structures को साफ़ तरीके से style करने के लिए inline-block इस्तेमाल करें।
Accepted values:
inline-block — inline flow करता है लेकिन width, height, और vertical margins accept करता है
inline — width और height को नज़रअंदाज़ करता है
block — पूरी line लेता है
vertical-align — baseline | top | middle | bottom inline-blocks को align करते हैं
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: आपके HTML code में spaces की वजह से browsers automatically inline-block elements के बीच एक छोटा, default horizontal space (लगभग 4px) जोड़ देते हैं।

उदाहरण: Understanding display: inline-block

css

<style>
span {
  display: inline-block;
  width: 100px;
  height: 40px;
  background: lightblue;
}
</style>
<span>A</span><span>B</span>

Navigation Menus बनाना

क्योंकि inline-block elements width और padding का सम्मान करते हुए साथ-साथ बैठते हैं, ये standard list items से साफ़, horizontal website navigation menus structure करने के लिए perfect display values हैं।

Note: उन्हें एक menu bar में horizontally align करने के लिए अपने navigation list items पर inline-block लागू करें।

Warning: सुनिश्चित करें कि आपके navigation list containers पर standard bullet styles disabled हैं।

उदाहरण: Building Navigation Menus

css

<style>
li {
  display: inline-block;
  background: lightblue;
  padding: 6px 10px;
  margin-right: 4px;
}
</style>
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
</ul>

HTML Whitespace Gap को Handle करना

जब आप अपने HTML code में inline-block elements को अलग-अलग lines पर लिखते हैं, तो browsers automatically उनके बीच एक छोटा whitespace gap (लगभग 4px) render करते हैं। यह gap उन grids को तोड़ सकता है जो precise percentage widths (जैसे दो 50% columns) पर निर्भर करते हैं।

Note: अपने closing और opening HTML tags को एक ही line पर एक-दूसरे के बगल में लिखकर, या parent container पर font-size: 0 set करके whitespace gap हटाएँ।

Warning: parent पर font-size: 0 set करने के लिए आपको text को visible बनाने के लिए सभी nested child elements पर font-size फिर से define करनी होगी।

उदाहरण: Handling the HTML Whitespace Gap

css

<style>
span {
  display: inline-block;
  width: 100px;
  background: lightgreen;
}
</style>
<span>A</span
><span>B</span>

Vertical Alignment Options

क्योंकि inline-block elements बाकी text elements के साथ inline बैठते हैं, ये अलग-अलग तरीकों से vertically align हो सकते हैं। आप vertical-align property (top, middle, या bottom) इस्तेमाल करके control कर सकते हैं कि वे आस-पास के text के relative कैसे align होते हैं।

Note:

icon images और text labels को साफ़ तरीके से साथ-साथ align करने के लिए vertical-align: middle इस्तेमाल करें।
Accepted values:
baseline — parent की baseline से align (initial value)
top — line के top से align
middle — line के middle से align
bottom — line के bottom से align
text-top / text-bottom / sub / super — text-relative options
length | percentage — किसी amount से ऊपर या नीचे करना
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: Default रूप से, inline-block elements baseline पर align होते हैं, जो उन्हें थोड़ा offset दिखा सकता है।

उदाहरण: Vertical Alignment Options

css

<style>
span {
  display: inline-block;
  vertical-align: middle;
}
img {
  vertical-align: middle;
}
</style>
<img src="https://placehold.co/20x20" alt="icon"> <span>Label aligned to the middle</span>

Inline-block बनाम Flexbox

Flexbox introduce होने से पहले, developers flexible layouts बनाने के लिए inline-block elements इस्तेमाल करते थे। जबकि inline-block अभी भी links और buttons को style करने के लिए बेहद उपयोगी है, responsive multi-column layouts बनाने के लिए Flexbox इस्तेमाल करना कहीं बेहतर है।

Note: multi-column layouts बनाने के लिए Flexbox इस्तेमाल करें, और inline-block को छोटे, text-wrapping controls के लिए बचाएँ।

Warning: complex, responsive grids बनाने के लिए inline-block इस्तेमाल करना tedious है और layout-breaking errors के लिए prone है।

उदाहरण: Inline-block vs. Flexbox

css

<style>
.old-way li {
  display: inline-block;
  background: lightblue;
  padding: 6px 10px;
}
.modern-way {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}
.modern-way div {
  background: lightgreen;
  padding: 6px 10px;
}
</style>
<ul class="old-way"><li>Link</li></ul>
<div class="modern-way"><div>Column</div></div>

Live Example

Chapter Quiz — Complete all 14 topics to unlock

0/14 topics done

Complete these topics first:

← Previous Lesson CSS Float Next Lesson → CSS Align