CSS line-height प्रॉपर्टी विभिन्न HTML एलिमेंट्स की लाइन हाइट निर्धारित करती है। इसका उपयोग आमतौर पर टेक्स्ट की लाइन्स के बीच की दूरी सेट करने के लिए किया जाता है। लाइन हाइट को कीवर्ड्स, प्रतिशत, या संख्यात्मक मानों का उपयोग करके सेट किया जा सकता है।
CSS line-height प्रॉपर्टी डेवलपर्स को वेब पेज पर दो इंलाइन एलिमेंट्स के बीच की जगह को परिभाषित करने की अनुमति देती है। डेवलपर्स अक्सर वेब पेज पर टेक्स्ट की लाइन्स के बीच की दूरी को बढ़ाने या घटाने के लिए CSS line-height प्रॉपर्टी का उपयोग करते हैं।
यह ट्यूटोरियल चर्चा करेगा कि CSS line-height प्रॉपर्टी का उपयोग कैसे करें। हम आपको शुरू करने में मदद करने के लिए एक उदाहरण का संदर्भ देंगे। इस ट्यूटोरियल को पढ़ने के अंत तक, आप अपने कोड में line-height प्रॉपर्टी का उपयोग करने में मास्टर होंगे।
CSS line-height
CSS line-height प्रॉपर्टी एक लाइन बॉक्स की हाइट सेट करती है। लाइन बॉक्स वे लाइन्स हैं जो CSS में एक बॉक्स बनाते हैं। इस मेथड का उपयोग अक्सर टेक्स्ट की लाइन्स के बीच की दूरी सेट करने के लिए किया जाता है।
लाइन हाइट एडजस्ट करने से आप इनडायरेक्टली टेक्स्ट (या अन्य एलिमेंट्स) की लाइन्स के बीच स्पेसिंग को एडजस्ट कर सकते हैं। यह माइक्रोसॉफ्ट वर्ड में टेक्स्ट को डबल स्पेस्ड या 1.15 स्पेस्ड फॉर्मेट करने जैसा है।
CSS line-height प्रॉपर्टी का सिंटैक्स इस प्रकार है:
line-height: lineHeight;
"lineHeight" एक लंबाई मान को संदर्भित करता है जो एक एलिमेंट की लाइन हाइट सेट करता है।
line-height प्रॉपर्टी के साथ आप तीन प्रकार के मान उपयोग कर सकते हैं: लंबाई, संख्या, और प्रतिशत:
| मान | विवरण | उदाहरण मान | उदाहरण मानों का परिणाम |
| लंबाई | माप की एक विशिष्ट इकाई (जैसे em, px, और cm) का उपयोग करके लाइन हाइट सेट करता है। | 10px, 15px, 20px | यदि आप 10px निर्दिष्ट करते हैं, तो आपकी लाइन हाइट 10px होगी। |
| संख्या | लाइन हाइट को फॉन्ट साइज के गुणक के बराबर सेट करता है। | 1, 1.8, 2 | यदि आपका फॉन्ट साइज 10px है, तो आपकी लाइन हाइट क्रमशः 10px, 18px, और 20px होगी। |
| प्रतिशत | एलिमेंट के फॉन्ट साइज के प्रतिशत के रूप में लाइन हाइट सेट करता है। | 30%, 50%, 110% | यदि आपका फॉन्ट साइज 10px है, तो आपकी लाइन हाइट क्रमशः 3px, 5px, और 11px होगी। |
वैकल्पिक रूप से, आप "normal" कीवर्ड निर्दिष्ट कर सकते हैं। यह कीवर्ड ब्राउज़र डिफ़ॉल्ट के उपयोग को निर्दिष्ट करता है। यह मान आमतौर पर लगभग 1.2 होता है, यह इस पर निर्भर करता है कि व्यूअर किस ब्राउज़र का उपयोग कर रहा है।
यदि आप line-height प्रॉपर्टी को एक बॉक्स पर लागू करते हैं, तो उस बॉक्स के भीतर सभी टेक्स्ट आपके द्वारा निर्दिष्ट लाइन हाइट का उपयोग करेंगे।
एक्सेसिबिलिटी पर एक नोट
लाइन स्पेसिंग बदलना line-height प्रॉपर्टी का एक सामान्य उपयोग है। ऐसा इसलिए है क्योंकि आप हमेशा यह सुनिश्चित करना चाहते हैं कि लाइन्स के बीच पर्याप्त जगह हो। यदि लाइन्स के बीच पर्याप्त जगह नहीं है, तो टेक्स्ट पढ़ना मुश्किल हो सकता है।
पढ़ने में कठिन टेक्स्ट का विशेष रूप से गंभीर प्रभाव उन लोगों पर पड़ता है जिनके पास दृश्य हानि है। वेबसाइट बनाते समय एक्सेसिबिलिटी हमेशा एक विचार होना चाहिए।
जब आप CSS में एक एलिमेंट की लाइन हाइट सेट करने के लिए एक संख्या का उपयोग कर रहे होते हैं, तो आपको 1.5 से कम किसी भी मान का उपयोग नहीं करना चाहिए। ऐसा इसलिए है क्योंकि लाइन हाइट के लिए 1.5 से कम मान दृश्य हानि वाले पाठकों के लिए आपकी वेबसाइट का उपयोग करना अधिक कठिन बना सकते हैं।
line-height CSS उदाहरण
मान लीजिए हम एक स्थानीय कुकिंग क्लब की वेबसाइट के लिए एक "अबाउट अस" पेज डिज़ाइन कर रहे हैं। पेज में एक हेडिंग होती है जिसके बाद क्लब के विवरण को रेखांकित करने वाला टेक्स्ट का एक पैराग्राफ होता है।
हम चाहते हैं कि हमारा टेक्स्ट ठीक से स्पेस्ड आउट हो। इसलिए, हम वेब पेज पर टेक्स्ट के पैराग्राफ की लाइन हाइट को 1.6rem पर सेट करने का निर्णय लेते हैं। हम इसे इस कोड का उपयोग करके कर सकते हैं:
<html> <h2>About Us</h2> <p>Fantastic Chefs, founded in 2007, is a cooking club local to Seattle, WA. Our cooking club meets on a weekly basis to share recipes, discuss cooking techniques, and make food together. Every Saturday afternoon, our members gather at our Seattle-based kitchen.</p> <style> p { font-size: 16px; line-height: 1.6rem; }
हमारा कोड रिटर्न करता है: 
ऊपर कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।
हमारी HTML फाइल में, हमने <h2> टैग का उपयोग करके "अबाउट अस" हेडर को परिभाषित किया। फिर, हमने फैंटास्टिक शेफ्स का विवरण लिखा और उस विवरण को HTML <p> टैग्स के भीतर संलग्न किया।
हमारी CSS फाइल में, हमने एक नियम परिभाषित किया। हमारे नियम में दो CSS प्रॉपर्टीज का उपयोग किया गया है। हमने सभी <p> HTML टैग्स के लिए लाइन हाइट को 1.6rem और फॉन्ट साइज को 16px पर सेट किया।
लाइन-हाइट प्रॉपर्टी के साथ हमारे द्वारा उपयोग की गई "rem" माप की इकाई रूट एलिमेंट के फॉन्ट-साइज के सापेक्ष लाइन हाइट सेट करती है। "rem" का मतलब "रूट एलिमेंट" है। तो, क्योंकि हमारा फॉन्ट साइज 16px था, इस पैराग्राफ के टेक्स्ट के लिए हमारी लाइन हाइट 25.6px (16px * 1.6) थी।
ऊपर के पैराग्राफ में टेक्स्ट पर्याप्त रूप से स्पेस्ड आउट है और ओवरलैप नहीं करता है।
हम ऊपर दिए गए उदाहरण में अपने <div> एलिमेंट पर भी अपनी line-height लागू कर सकते थे। यह हमारे <div> टैग में सभी टेक्स्ट के लिए लाइन हाइट को हमारे द्वारा निर्दिष्ट मानों पर सेट करेगा। इसका मतलब होगा कि हमारा टाइटल और हमारा <p> टैग दोनों प्रभावित होंगे।
निष्कर्ष
CSS line-height प्रॉपर्टी एक लाइन बॉक्स की हाइट सेट करती है। आमतौर पर, इस प्रॉपर्टी का उपयोग पैराग्राफ या हेडिंग में टेक्स्ट की लाइन्स के बीच स्पेसिंग सेट करने के लिए किया जाता है। line-height को normal कीवर्ड, एक प्रतिशत, एक लंबाई, या एक संख्यात्मक मान का उपयोग करके सेट किया जा सकता है।
इस ट्यूटोरियल ने CSS line-height प्रॉपर्टी की मूल बातें और आप इसे अपने कोड में कैसे उपयोग कर सकते हैं, पर चर्चा की। अब आपके पास CSS line-height प्रॉपर्टी का उपयोग एक एक्सपर्ट की तरह शुरू करने के लिए ज्ञान है!
क्या आप वेब डेवलपर बनना चाहते हैं? एक्सपर्ट टिप्स और शीर्ष शिक्षण संसाधनों और कोर्सेज पर मार्गदर्शन के लिए हमारा CSS सीखने का गाइड देखें।
