CSS का उपयोग करके डिस्प्ले इंलाइन-ब्लॉक

display: inline-block

display: inline-block प्रॉपर्टी वैल्यू वाला एलिमेंट एक इंलाइन-लेवल ब्लॉक कंटेनर के रूप में प्रदर्शित होता है।

विशेषताएं:

• इंलाइन एलिमेंट की तरह फ्लो करता है (टेक्स्ट के साथ एक लाइन में)
• ब्लॉक एलिमेंट की तरह width, height, margin, padding स्वीकार करता है
• लाइन ब्रेक नहीं बनाता
• वर्टिकल अलाइनमेंट (vertical-align) सपोर्ट करता है

उदाहरण 1: पैराग्राफ में इंलाइन-ब्लॉक

<!DOCTYPE html>
<html>
<head>
<style>
p {
  background-color: orange;
  color: white;
}
p.demo {
  display: inline-block;
}
</style>
</head>
<body>
<h1>छात्र परिणाम</h1>
<div>
  MCA छात्र का परिणाम <p class="demo">20 दिसंबर 2019</p> को घोषित किया जाएगा। उसी दिन शाम 8 बजे वेबसाइट चेक करें।
</div>
</body>
</html>

आउटपुट

"20 दिसंबर 2019" टेक्स्ट एक इंलाइन-ब्लॉक एलिमेंट के रूप में वाक्य के बीच में दिखाई देगा, नारंगी बैकग्राउंड के साथ।

उदाहरण 2: display: none के साथ तुलना

<!DOCTYPE html>
<html>
<head>
<style>
p {
  background-color: orange;
  color: white;
}
p.demo1 {
  display: none;
}
p.demo2 {
  display: inline-block;
}
</style>
</head>
<body>
<h1>मैच विवरण</h1>
<div>
  मैच <p class="demo1">सुबह 9 बजे</p> 10 बजे 20 दिसंबर को शुरू होगा।
</div>
<div>
  मैच <p class="demo2">शाम 5 बजे</p> 20 दिसंबर को समाप्त होगा।
</div>
</body>
</html>

आउटपुट

पहले वाक्य में "सुबह 9 बजे" छिपा होगा (display: none)। दूसरे में "शाम 5 बजे" इंलाइन-ब्लॉक के रूप में नारंगी बैकग्राउंड के साथ दिखेगा।

inline-block vs inline vs block:

सामान्य उपयोग के मामले:

• नेविगेशन मेनू आइटम्स
• बटन ग्रुप्स
• इमेज गैलरी थंबनेल्स
• फॉर्म एलिमेंट्स (लेबल + इनपुट जोड़े)
• कार्ड लेआउट्स

सामान्य समस्या: व्हाइटस्पेस गैप

HTML में इंलाइन-ब्लॉक एलिमेंट्स के बीच व्हाइटस्पेस छोटे गैप बनाता है। समाधान:

• एलिमेंट्स के बीच HTML व्हाइटस्पेस हटाएं
• पैरेंट पर font-size: 0 सेट करें, बच्चों पर रीसेट करें
• फ्लेक्सबॉक्स/ग्रिड का उपयोग करें (मॉडर्न विकल्प)