एक्स-ओवरफ्लो क्यों होता है: छुपा कारण अतिरिक्त स्थान नीचे?

Question

मेरे पास एक-दूसरे के अंदर दो स्पैन हैं। आंतरिक अवधि में मेरे पास overflow-x:hidden है। यह आंतरिक अवधि के नीचे अतिरिक्त जगह का कारण बनता है। क्यूं कर?

<span style="" class="yavbc-color-tip"><span style="">Some text</span></span> 

फिडल: http://jsfiddle.net/U92ue/

नोट: मैं केवल नवीनतम क्रोम में परीक्षण किया है।

Answer 1

Visual formatting model - 9.4.1 Block formatting contexts

तैरता है, पूरी तरह से तैनात तत्वों, ब्लॉक कंटेनर (जैसे इनलाइन ब्लॉक, टेबल-कोशिकाओं, और टेबल-कैप्शन) कि साथ बक्से, और ब्लॉक बॉक्स को ब्लॉक नहीं कर रहे हैं 'अतिप्रवाह 'दृश्यमान' के अलावा ' (सिवाय इसके कि जब व्यूपोर्ट को उस मूल्य को प्रचारित किया गया हो) को छोड़कर) उनकी सामग्री के लिए नए ब्लॉक प्रारूपण संदर्भ स्थापित करें।

अधिक विशेष रूप से, अतिप्रवाह संपत्ति बदलते समय एक नया ब्लॉक स्वरूपण संदर्भ स्थापित किया जाता है। डिफ़ॉल्ट रूप से, एक तत्व का vertical-align संपत्ति मान baseline है। इसे ठीक करने के लिए आप इसे top जैसे कुछ में बदल सकते हैं।

Updated Example

span.yavbc-color-tip span { 
    display: inline-block; 
    padding: 3px; 
    border-radius: 8px; 
    border: none; 
    background-color:#005e8e; 
    color:#7cd3ff; 
    overflow-x: hidden; /* This gives extra space under this span. Why? */ 
    vertical-align:top; 
} 

सूचना ऐसा नहीं होता है जब तत्व के प्रदर्शन inline-block करने के लिए बदल नहीं है? यह inline तत्वों के साथ नहीं होता है - example इसका प्रदर्शन।