खाली इनलाइन-ब्लॉक तत्वों के लंबवत संरेखण

Question

निम्नलिखित HTML/CSS पर विचार करें। खाली हरा बॉक्स नहीं है; यह अन्य दो बक्से से ऊपर दिखाई देता है। अगर मैं हरे रंग के बक्से में कुछ पाठ जोड़ता हूं, तो यह व्यवहार बंद हो जाता है और जिस तरह से मैं इसे चाहता हूं, सबकुछ ऊपर जाता है।

यह आईई 8 (मानकों मोड), फ़ायरफ़ॉक्स 3.0 और क्रोम में लगातार होता है, इसलिए मुझे लगता है कि खाली इनलाइन-ब्लॉक तत्वों की कुछ संपत्ति है जो मुझे समझ में नहीं आती हैं।

मैं लंबवत-संरेखण संपत्ति निर्दिष्ट करके बॉक्स को लाइन अप कर सकता हूं, लेकिन फिर चार टेक्स्ट मान अब गठबंधन नहीं होते हैं। कोई विचार? मैं इस पर फंस गया हूँ।

Answer 1

हरे रंग के रंग के अंदर   जोड़ने का प्रयास करें।

Answer 2

a 
<span style="background-color:blue;">b</span> 
<span style="background-color:green;">&nbsp;</span> 
<span style="background-color:red;">c</span> 
d 

Answer 3

अवधि शीर्ष संरेखण तो नकारात्मक मार्जिन बराबर दें अपने गद्दी के लिए, और आप नॉन-ब्रेकिंग स्पेस हैक की जरूरत नहीं है।

span 
{ 
    display:inline-block; 
    width:5em; 
    height:5em; 
    padding:1em; 
    vertical-align:top; 
    margin-top: -1em; 
} 



a 
    <span style="background-color:blue;">b</span> 
    <span style="background-color:green;"></span> 
    <span style="background-color:red;">c</span> 
d