CSS का उपयोग करके लाइन हाइट सेट करना

line-height प्रॉपर्टी

लाइन हाइट सेट करने के लिए line-height प्रॉपर्टी का उपयोग करें।

संभावित मान:

line-height: normal | number | length | % | initial | inherit;

मान प्रकार:

• normal: ब्राउज़र डिफ़ॉल्ट (आमतौर पर ~1.2)
• number (यूनिटलेस): फॉन्ट साइज़ का गुणक (अनुशंसित)
• length: निश्चित मान (px, em, rem, आदि)
• %: फॉन्ट साइज़ का प्रतिशत

उदाहरण 1: यूनिटलेस नंबर (अनुशंसित)

<!DOCTYPE html>
<html>
<head>
<style>
div {
  line-height: 1.9;
}
</style>
</head>
<body>
<h1>डेमो हेडिंग</h1>
<div>
  <p>यह डेमो टेक्स्ट है।<br> यह एक और डेमो टेक्स्ट है। </p>
</div>
</body>
</html>

आउटपुट

लाइन हाइट फॉन्ट साइज़ का 1.9 गुना होगी। बच्चे एलिमेंट्स इसे अनुपातिक रूप से विरासत में लेंगे।

उदाहरण 2: प्रतिशत मान

<!DOCTYPE html>
<html>
<head>
<style>
div {
  line-height: 200%;
}
</style>
</head>
<body>
<h1>डेमो हेडिंग</h1>
<div>
  <p>यह डेमो टेक्स्ट है।<br> यह एक और डेमो टेक्स्ट है। </p>
</div>
</body>
</html>

आउटपुट

लाइन हाइट फॉन्ट साइज़ का 200% (2x) होगी।

यूनिटलेस vs लेंथ/% - महत्वपूर्ण अंतर:

उदाहरण समस्या:

.parent { font-size: 20px; line-height: 1.5em; }  /* 30px computed */
.child { font-size: 40px; }  /* line-height अभी भी 30px - टेक्स्ट ओवरलैप! */

.parent { font-size: 20px; line-height: 1.5; }   /* गुणक */
.child { font-size: 40px; }  /* line-height = 60px - सही! */

सर्वोत्तम अभ्यास:

• हमेशा यूनिटलेस नंबर उपयोग करें: line-height: 1.5
• बॉडी टेक्स्ट के लिए: 1.5 - 1.7
• हेडिंग्स के लिए: 1.1 - 1.3
• कोड/प्रीफॉर्मेटेड के लिए: 1.4 - 1.6
• CSS रीसेट में सेट करें: html { line-height: 1.5; }

वर्टिकल रिदम (बेसलाइन ग्रिड):

:root {
  --line-height: 1.5;
  --base-font: 16px;
}
body {
  font-size: var(--base-font);
  line-height: var(--line-height);
}
h1 { font-size: calc(var(--base-font) * 2); line-height: calc(var(--line-height) * 2); }