लाइन-ऊंचाई - सीएसएस-ट्रिक्स

line-heightसंपत्ति ऊपर और इनलाइन तत्वों नीचे स्थान की मात्रा को परिभाषित करता है। अर्थात्, ऐसे तत्व जो display: inlineया पर सेट होते हैं display: inline-block। इस संपत्ति का उपयोग अक्सर पाठ की पंक्तियों के लिए अग्रणी सेट करने के लिए किया जाता है।

p ( line-height: 1.5; )

line-heightसंपत्ति कीवर्ड मान स्वीकार कर सकते हैं normalया noneके साथ ही एक संख्या, लम्बाई, या प्रतिशत।

युक्ति के अनुसार, "सामान्य" का एक मान केवल एक ठोस मूल्य नहीं है जो सभी तत्वों पर लागू होता है, बल्कि तत्व पर फ़ॉन्ट आकार सेट (या विरासत में मिली) के आधार पर "उचित" मान की गणना करता है।

किसी भी मान्य सीएसएस इकाई (px, em, rem, आदि) का उपयोग करके एक लंबाई मान को परिभाषित किया जा सकता है।

एक प्रतिशत मान तत्व का फ़ॉन्ट आकार प्रतिशत से गुणा किया जाता है। उदाहरण के लिए:

इस पेन को देखें!

ऊपर दिए गए डेमो में, तीन पैराग्राफ में क्रमशः 150%, 200%, और 250% तक उनकी लाइन हाइट्स होती है। बॉडी एलिमेंट का फॉन्ट साइज़ 20px से परिभाषित है। इसका मतलब है कि पैराग्राफ के लिए गणना की गई रेखाएं क्रमशः 30px, 40px और 50px हैं।

यूनिटलेस लाइन हाइट्स

लाइन ऊंचाई को परिभाषित करने के लिए अनुशंसित विधि एक संख्या मान का उपयोग कर रही है, जिसे "यूनिटलेस" लाइन ऊंचाई के रूप में संदर्भित किया जाता है। एक संख्या मान दशमलव-आधारित संख्या सहित कोई भी संख्या हो सकती है, जैसा कि इस पृष्ठ पर पहले कोड उदाहरण में उपयोग किया जाता है।

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

ब्राउज़र का समर्थन

क्रोम	सफारी	फ़ायर्फ़ॉक्स	ओपेरा	अर्थात	एंड्रॉयड	आईओएस
काम करता है	काम करता है	काम करता है	काम करता है	काम करता है	काम करता है	काम करता है