सीएसएस: आसन्न इनलाइन तत्व के फ़ॉन्ट आकार को कम करने से समग्र अग्रणी क्यों बढ़ता है?

Question

मेरे पास एक तत्व है जिसमें दो अवधि टैग होते हैं जिनमें प्रत्येक में कुछ टेक्स्ट होता है। कंटेनर तत्व फ़ॉन्ट आकार सेट करता है, फिर दूसरे स्पैन टैग पर फ़ॉन्ट आकार कम आकार पर सेट होता है। जब फ़ॉन्ट आकार में दूसरा अवधि कम हो जाता है, तो लाइन और अगले ब्लॉक तत्व के बीच की जगह बढ़ जाती है। यह वेबकिट और गेको दोनों में होता है।

p कंटेनर तत्व { margin-bottom: 0; padding-bottom: 10px; } है और इसके बाद भाई { margin-top: -5px; }

है निम्न छवि स्थिति को दिखाता है और Firebug में दस्तावेज़ संरचना के प्रासंगिक भाग का एक स्नैपशॉट शामिल हैं।

क्यों पी टैग दूसरा स्पैन टैग का फ़ॉन्ट आकार को कम करने के बाद बढ़ रही नीचे रिक्ति है?

Answer 1

मेरा अनुमान है कि आपके पास उस दशमलव अवधि (शायद 32 पीएक्स?) द्वारा विरासत में एक (अपेक्षाकृत) बड़ी लाइन-ऊंचाई विरासत में है, और जब आप फ़ॉन्ट आकार को 18px तक कम करते हैं, तो आपको एक ऐसी स्थिति मिलती है जहां आधार रेखा दशमलव ग्लिफ नोडेसिमल ग्लाइफ के साथ मेल खाते हैं, लेकिन रेखा को अभी भी पूर्ण निर्दिष्ट रेखा-ऊंचाई लेनी होगी। इस प्रकार, बेसलाइन के नीचे अतिरिक्त जगह जोड़ा जाता है।

पंक्ति-ऊंचाई नियम जोड़ें और मुझे यकीन है यह गायब हो जाता है:

.box .value > .decimal { line-height: 18px; }