सीएसएस लेआउट - डिस्प्ले: इनलाइन-ब्लॉक

डिस्प्ले: इनलाइन-ब्लॉक

से डिस्प्ले: इनलाइन से मुकाबले, मुख्य अंतर यह है डिस्प्ले: इनलाइन-ब्लॉक एलिमेंट पर चौड़ाई और ऊंचाई निर्धारित करने की अनुमति दिया गया है。

इसी तरह, यदि डिस्प्ले: इनलाइन-ब्लॉक सेट किया गया है, तो ऊपर-नीचे बाहरी छेद/अंतरवर्ती छेद को बनाए रखा जाएगा, जबकि डिस्प्ले: इनलाइन नहीं।

डिस्प्ले: ब्लॉक के मुकाबले, मुख्य अंतर यह है कि डिस्प्ले: इनलाइन-ब्लॉक एलिमेंट के बाद परिवर्तन को नहीं जोड़ता, इसलिए इस एलिमेंट को अन्य एलिमेंट के साथ स्थित हो सकता है。

नीचे दिया गया उदाहरण डिस्प्ले: इनलाइन, डिस्प्ले: इनलाइन-ब्लॉक और डिस्प्ले: ब्लॉक के विभिन्न व्यवहार को दिखाता है:

इंस्टेंस

स्पैन.ए {
  डिस्प्ले: इनलाइन; /* स्पैन का डिफ़ॉल्ट मान */
  विड्थ: 100पिक्सेल;
  हाइट: 100पिक्सेल;
  पैडिंग: 5पिक्सेल;
  बॉर्डर: 1पिक्सल सॉलिड ब्लू; 
  बैकग्राउंड-कलर: दूधी दुमदुमी; 
}
स्पैन.बी {
  डिस्प्ले: इनलाइन-ब्लॉक;
  विड्थ: 100पिक्सेल;
  हाइट: 100पिक्सेल;
  पैडिंग: 5पिक्सेल;
  बॉर्डर: 1पिक्सल सॉलिड ब्लू; 
  बैकग्राउंड-कलर: दूधी दुमदुमी; 
}
स्पैन.सी {
  डिस्प्ले: ब्लॉक;
  विड्थ: 100पिक्सेल;
  हाइट: 100पिक्सेल;
  पैडिंग: 5पिक्सेल;
  बॉर्डर: 1पिक्सल सॉलिड ब्लू; 
  बैकग्राउंड-कलर: दूधी दुमदुमी; 
}

स्वयं प्रयोग करें

नेविगेशन लिंक बनाने के लिए inline-block का इस्तेमाल करें

डिस्प्ले का एक सामान्य इस्तेमाल:inline-block सूची आइटम्स को लेटी से बजाए स्तरांक से दिखाने के लिए इस्तेमाल किया जाता है।नीचे दिए गए उदाहरण में एक स्तरांक नेविगेशन लिंक बनाया गया है:

इंस्टेंस

.nav {
  बैकग्राउंड-कलर: दूधी दुमदुमी; 
  लिस्ट-स्टाइल-टाइप: नोनील;
  टेक्स्ट-एलाइन: सेंटर; 
  पैडिंग: 0;
  मार्गिन: 0;
}
.nav li {
  डिस्प्ले: इनलाइन-ब्लॉक;
  फ़ॉन्ट-साइज़: 20पिक्सल;
  पैडिंग: 20पिक्सल;
}

स्वयं प्रयोग करें