इनलाइन-ब्लॉक का उपयोग करते समय, एक छिपे हुए कंटेनर के भीतर एक खाली इनलाइन div तत्व उत्सुकता से ऊंचाई प्राप्त करता है। डिस्प्ले:ब्लॉक के व्यवहार के विपरीत, ऐसा क्यों होता है?

डिस्प्ले:इनलाइन-ब्लॉक तत्व पर विशिष्ट स्वरूपण प्रदान करता है:

• इनलाइन-स्तरीय स्वरूपण: तत्व रखे गए हैं कंटेनर ब्लॉक के भीतर क्षैतिज रूप से बाहर।
• लाइन-ऊंचाई गणना: लाइन-ऊंचाई की गणना इनलाइन तत्वों के लिए अलग-अलग तरीके से की जाती है। इनलाइन-ब्लॉक तत्वों के लिए, यह मार्जिन बॉक्स की ऊंचाई बन जाती है। सामान्य इनलाइन तत्वों के लिए, यह 'लाइन-ऊंचाई' संपत्ति है।

जब इनलाइन-ब्लॉक तत्व खाली होता है, तो यह अपनी मूल लाइन-ऊंचाई मानता है, भले ही कोई फ़ॉन्ट या टेक्स्ट सामग्री न हो। इसके परिणामस्वरूप तत्व अपनी खाली स्थिति के बावजूद छोटी लेकिन ध्यान देने योग्य ऊंचाई प्राप्त कर रहा है।

इस ऊंचाई की समस्या को रोकने के लिए लाइन-ऊंचाई गणना को खत्म करने के लिए फ़ॉन्ट-आकार: 0 के साथ एक रैपर का उपयोग करना है:

.wrapper {
    font-size: 0;
}

.wrapper div {
    font-size: medium;
   
}

अद्यतन: इनलाइन-ब्लॉक ऊंचाई को समझना

प्रारंभिक मान्यताओं के विपरीत, एक खाली इनलाइन-ब्लॉक तत्व की सटीक ऊंचाई आधिकारिक तौर पर प्रलेखित नहीं है। हालाँकि, अवलोकन और परीक्षण से पता चलता है कि:

• इनलाइन-ब्लॉक विरासत में मिली लाइन-ऊंचाई के आधार पर एक न्यूनतम लाइन स्थान आरक्षित करता है, जो आमतौर पर तत्व द्वारा निर्धारित किया जाता है।
• यह लाइन इनलाइन-ब्लॉक खाली होने पर भी स्थान बना रहता है और सैद्धांतिक रूप से सीएसएस विनिर्देशों के अनुसार इसे शून्य-ऊंचाई माना जाना चाहिए।