सीएसएस प्रॉपर्टी 'लाइन-ऊंचाई' क्यों नहीं है जिससे मुझे क्रोम में तंग लाइन-रिक्त स्थान मिलते हैं?

Question

मेरे पास एक अनुच्छेद टैग है जिसे मैंने 15px की रेखा ऊंचाई के साथ कहीं और परिभाषित किया है, और मेरे पास पृष्ठ के नीचे एक और अनुच्छेद टैग है जहां मैं लाइन ऊंचाई को 10px के आसपास बनाना चाहता हूं। मजेदार बात यह है कि यह मुझे 10px या उससे कम कुछ भी नहीं होने देगी, लेकिन जब मैं इसे 25px या उच्चतर पर सेट करता हूं, तो रेखा-ऊंचाई की संपत्ति काम कर रही है।

मैंने क्रोम ब्राउज़र के वेब डेवलपर टूल (फ़ायरफ़ॉक्स के फ़ायरबग का क्रोम संस्करण) के माध्यम से प्रासंगिक सीएसएस (सभी हाथ-कोडित) की जांच की और कुछ भी प्रासंगिक नहीं मिला। क्या कोई आम सीएसएस बग है जो मुझे लाइन-ऊंचाई को एक निश्चित न्यूनतम राशि से कम करने से रोकती है?

Answer 1

लाइन-ऊंचाई फ़ॉन्ट आकार के सापेक्ष है, आप तब तक कम नहीं जा सकते जब तक कि आप नकारात्मक मार्जिन घोषित न करें।

Answer 2

मैंने फ़ायरफ़ॉक्स और क्रोम दोनों में देखा है कि यदि आप एचटीएमएल 5 डॉक्ट टाइप सेट करते हैं तो इनलाइन तत्वों के लिए न्यूनतम लाइन-ऊंचाई होती है। ब्लॉक तत्वों के लिए आप जो भी चाहें लाइन-ऊंचाई सेट कर सकते हैं, यहां तक ​​कि रेखाएं ओवरलैप भी कर सकते हैं।

यदि आप एचटीएमएल 5 डॉक्टरेट सेट नहीं करते हैं, तो ब्लॉक या इनलाइन तत्वों के लिए न्यूनतम लाइन-ऊंचाई नहीं है।

Answer 3

मैं एक ही मुद्दे में भाग गया, साथ अच्छी तरह से काम:

.element { display: block; line-height: 1.2; } 

Answer 4

आईई 8-11, फ़ायरफ़ॉक्स 38.0.1, और क्रोम 43 में इस परीक्षण के बाद, व्यवहार में ही है: इनलाइन तत्वों एक है न्यूनतम लाइन-ऊंचाई जो वे नीचे नहीं जाएंगे। ऐसा प्रतीत होता है यह न्यूनतम ऊंचाई CSS spec से आता है:

एक ब्लॉक कंटेनर तत्व जिनकी सामग्री इनलाइन स्तर के तत्वों से बना है पर, 'line-height' तत्व के भीतर लाइन बक्से की न्यूनतम ऊंचाई निर्दिष्ट करता है। न्यूनतम ऊंचाई में बेसलाइन के ऊपर न्यूनतम ऊंचाई और उसके नीचे न्यूनतम गहराई होती है, ठीक उसी तरह जैसे प्रत्येक पंक्ति बॉक्स शून्य-चौड़ाई इनलाइन बॉक्स के साथ तत्व के फ़ॉन्ट और रेखा ऊंचाई गुणों के साथ शुरू होता है। हम उस काल्पनिक बॉक्स को "स्ट्रैट" कहते हैं।

यदि आप इनलाइन तत्वों के कुछ लाभ बनाए रखना चाहते हैं, तो आप display: inline-block का उपयोग कर सकते हैं। आप display: block का भी उपयोग कर सकते हैं। दोनों परीक्षण किए गए सभी ब्राउज़रों में आप जो चाहें लाइन-ऊंचाई बनाने की अनुमति देंगे। अधिक पढ़ने के लिए

दो संबंधित प्रश्नों: {: 0.75em line-height} `यह मेरे लिए ठीक काम करता है

why the span's line-height is useless

The browser seems to have a minimum line-height on this block that contains text. Why?