CSS लाइन की ऊँचाई:एक कैसे-कैसे मार्गदर्शिका

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

CSS लाइन-ऊंचाई संपत्ति डेवलपर्स को वेब पेज पर दो इनलाइन तत्वों के बीच की जगह को परिभाषित करने की अनुमति देती है। वेब पेज पर टेक्स्ट की पंक्तियों के बीच की दूरी को बढ़ाने या घटाने के लिए डेवलपर्स अक्सर CSS लाइन-ऊंचाई प्रॉपर्टी का उपयोग करते हैं।

यह ट्यूटोरियल चर्चा करेगा कि CSS लाइन-ऊंचाई संपत्ति का उपयोग कैसे करें। आरंभ करने में आपकी सहायता के लिए हम एक उदाहरण का उल्लेख करेंगे। इस ट्यूटोरियल को पढ़ने के अंत तक, आप अपने कोड में लाइन-हाइट प्रॉपर्टी का उपयोग करने में माहिर होंगे।

CSS लाइन-ऊंचाई

CSS लाइन-ऊंचाई संपत्ति एक लाइन बॉक्स की ऊंचाई निर्धारित करती है। लाइन बॉक्स वे लाइनें हैं जो CSS में एक बॉक्स बनाती हैं। इस पद्धति का प्रयोग अक्सर पाठ की पंक्तियों के बीच की दूरी निर्धारित करने के लिए किया जाता है।

लाइन की ऊंचाई को समायोजित करने से आप वेब पेज पर टेक्स्ट की पंक्तियों (या अन्य तत्वों) के बीच अंतर को अप्रत्यक्ष रूप से समायोजित कर सकते हैं। यह माइक्रोसॉफ्ट वर्ड में टेक्स्ट को डबल स्पेस या 1.15 स्पेस में फॉर्मेट करने जैसा है।

CSS लाइन-ऊंचाई प्रॉपर्टी का सिंटैक्स इस प्रकार है:

line-height: lineHeight;

"लाइनहाइट" एक लंबाई मान को संदर्भित करता है जो किसी तत्व की रेखा ऊंचाई निर्धारित करता है।

तीन प्रकार के मान जिनका उपयोग आप लाइन-ऊंचाई संपत्ति के साथ कर सकते हैं, लंबाई, संख्या और प्रतिशत हैं:

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

मान	विवरण	उदाहरण मान	परिणाम उदाहरण मान
लंबाई	माप की एक विशिष्ट इकाई (जैसे em, px, और cm) का उपयोग करके लाइन की ऊंचाई सेट करता है।	10px, 15px, 20px	यदि आप 10px निर्दिष्ट करते हैं, तो आपकी पंक्ति की ऊँचाई 10px होगी।
संख्या	पंक्ति की ऊंचाई को फ़ॉन्ट आकार के गुणज के बराबर सेट करता है।	1, 1.8, 2	यदि आपका फ़ॉन्ट आकार 10px है, तो आपकी पंक्ति की ऊँचाई क्रमशः 10px, 18px और 20px होगी।
प्रतिशत	पंक्ति की ऊंचाई को तत्व के फ़ॉन्ट आकार के प्रतिशत के रूप में सेट करता है।	30%, 50%, 110%	यदि आपका फ़ॉन्ट आकार 10px है, तो आपकी पंक्ति की ऊँचाई क्रमशः 3px, 5px और 11px होगी।

वैकल्पिक रूप से, आप "सामान्य" कीवर्ड निर्दिष्ट कर सकते हैं। यह कीवर्ड ब्राउज़र डिफ़ॉल्ट के उपयोग को निर्दिष्ट करता है। यह मान आमतौर पर 1.2 के आसपास होता है, जो इस बात पर निर्भर करता है कि दर्शक किस ब्राउज़र का उपयोग कर रहा है।

यदि आप किसी बॉक्स में लाइन-ऊंचाई गुण लागू करते हैं, तो उस बॉक्स के भीतर का सभी टेक्स्ट आपके द्वारा निर्दिष्ट लाइन ऊंचाई का उपयोग करेगा।

सुलभता पर एक नोट

लाइन स्पेसिंग बदलना लाइन-ऊंचाई संपत्ति का एक सामान्य उपयोग है। ऐसा इसलिए है क्योंकि आप हमेशा यह सुनिश्चित करना चाहते हैं कि लाइनों के बीच पर्याप्त जगह हो। यदि पंक्तियों के बीच पर्याप्त जगह नहीं है, तो पाठ को पढ़ना मुश्किल हो सकता है।

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

जब आप CSS में किसी एलीमेंट की लाइन की ऊंचाई सेट करने के लिए किसी संख्या का उपयोग कर रहे हों, तो आपको 1.5 से कम किसी भी मान का उपयोग नहीं करना चाहिए। ऐसा इसलिए है क्योंकि लाइन की ऊंचाई के लिए 1.5 से कम मान दृष्टिबाधित पाठकों के लिए आपकी वेबसाइट का उपयोग करना अधिक कठिन बना सकते हैं।

लाइन-ऊंचाई 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;
}

हमारा कोड लौटाता है: CSS लाइन की ऊँचाई:एक कैसे-कैसे मार्गदर्शिका हमारे एचटीएमएल/सीएसएस कोड का आउटपुट देखने के लिए ऊपर दिए गए कोड संपादक में बटन।

हमारी HTML फ़ाइल में, हमने

टैग का उपयोग करके "हमारे बारे में" शीर्षलेख परिभाषित किया है। फिर, हमने Fantastic Chefs का विवरण लिखा और उस विवरण को HTML
टैग में संलग्न किया।

हमारी CSS फ़ाइल में, हमने एक नियम को परिभाषित किया है। हमारा नियम दो CSS गुणों का उपयोग करता है। हम सभी
HTML टैग्स के लिए लाइन की ऊंचाई 1.6rem और फ़ॉन्ट आकार 16px पर सेट करते हैं।
माप की "रेम" इकाई जिसका उपयोग हमने लाइन-ऊंचाई संपत्ति के साथ किया था, मूल तत्व के फ़ॉन्ट-आकार के सापेक्ष एक रेखा ऊंचाई निर्धारित करता है। "रेम" का अर्थ "मूल तत्व" है। इसलिए, क्योंकि हमारे फ़ॉन्ट का आकार 16px था, पाठ के इस अनुच्छेद के लिए हमारी पंक्ति की ऊँचाई 25.6px (16px * 1.6) थी।

ऊपर दिए गए पैराग्राफ में टेक्स्ट पर्याप्त रूप से फैला हुआ है और ओवरलैप नहीं करता है।

हम उपरोक्त उदाहरण में अपनी लाइन-ऊंचाई को हमारे
तत्व पर भी लागू कर सकते हैं। यह हमारे
टैग के सभी टेक्स्ट के लिए हमारे द्वारा निर्दिष्ट मानों के लिए लाइन की ऊंचाई निर्धारित करेगा। इसका मतलब यह होगा कि हमारा शीर्षक और हमारा
टैग दोनों प्रभावित होंगे।

निष्कर्ष

CSS लाइन-ऊंचाई संपत्ति एक लाइन बॉक्स की ऊंचाई निर्धारित करती है। आमतौर पर, इस प्रॉपर्टी का इस्तेमाल पैराग्राफ या हेडिंग में टेक्स्ट की पंक्तियों के बीच स्पेसिंग सेट करने के लिए किया जाता है। लाइन-ऊंचाई को सामान्य कीवर्ड, प्रतिशत, लंबाई या संख्यात्मक मान का उपयोग करके सेट किया जा सकता है।

इस ट्यूटोरियल ने CSS लाइन-ऊंचाई संपत्ति की मूल बातें और आप इसे अपने कोड में कैसे उपयोग कर सकते हैं, इस पर चर्चा की। अब आपके पास एक विशेषज्ञ की तरह CSS लाइन-ऊंचाई संपत्ति का उपयोग शुरू करने के लिए आवश्यक ज्ञान है!

क्या आप एक वेब डेवलपर बनना चाह रहे हैं? शीर्ष शिक्षण संसाधनों और पाठ्यक्रमों पर विशेषज्ञ युक्तियों और मार्गदर्शन के लिए हमारी कैसे सीखें CSS मार्गदर्शिका देखें।