लाइन-हाइट गुण

line-height गुण टेक्स्ट की लाइनों के बीच का अंतराल (लाइन अंतराल) सेट करता है।

यह गुण टेक्स्ट की लाइनों के बीच का फासला नहीं सेट करता, जैसा कि लग सकता है, यह टेक्स्ट लाइन की ऊंचाई सेट करता है। इसका मतलब है कि लाइनों के बीच का असली फासला इस तरह से कैलकुलेट किया जाएगा: line-height - font-size = टेक्स्ट की लाइनों के बीच की दूरी। या फिर इसके उल्टा line-height = font-size + लाइनों के बीच की दूरी।

सिंटैक्स

cssसिलेक्टर {
  line-height: वैल्यू;
}

वैल्यूज

गुण की वैल्यू कोई भी आकार की यूनिट हो सकती है। % में वैल्यू देने पर लाइन अंतराल फॉन्ट साइज के प्रतिशत में होगा।

इसके अलावा, शून्य से बड़ी कोई भी संख्या वैल्यू के रूप में दी जा सकती है। इस स्थिति में इसे फॉन्ट साइज के मल्टीप्लायर के रूप में लिया जाता है। उदाहरण के लिए, अगर font-size की वैल्यू 20px है, और line-height - 1.5, तो यह line-height: 30px लिखने के बराबर है (20px * 1.5 = 30px)।

डिफॉल्ट रूप से गुण की वैल्यू normal होती है, इस स्थिति में ब्राउज़र लाइन अंतराल खुद ही चुन लेता है।

उदाहरण

इस उदाहरण में टेक्स्ट की लाइनों के बीच की दूरी line-height - font-size = 38px - 18px = 20px होगी:

html<p>
  some long text
</p>

cssp {
  font-size: 18px;
  line-height: 35px;
  text-align: justify;
}

Результат:

उदाहरण

फासला घटाकर 25px - 18px = 7px कर दें:

html<p>
  some long text
</p>

cssp {
  font-size: 18px;
  line-height: 25px;
  text-align: justify;
}

Результат:

उदाहरण

इस उदाहरण में टेक्स्ट की लाइनों के बीच की दूरी line-height - font-size = 18px - 18px = 0px होगी - लाइनें लगभग चिपक जाएंगी (ऊपरी लाइन के अक्षरों की पूँछ नीचे वाली लाइन के अक्षरों की पूँछ को छूएगी):

html<p>
  some long text
</p>

cssp {
  font-size: 18px;
  line-height: 18px;
  text-align: justify;
}

Результат:

उदाहरण

इस उदाहरण में वैल्यू line-height - फॉन्ट साइज का मल्टीप्लायर 1.5 है। इसलिए line-height के बराबर होगा font-size * 1.5 = 18px * 1.5 = 27px। और लाइनों के बीच का असली फासला होगा line-height - font-size = 27px - 18px = 9px:

html<p>
  some long text
</p>

cssp {
  font-size: 18px;
  line-height: 1.5;
  text-align: justify;
}

Результат:

उदाहरण

मल्टीप्लायर बढ़ा दें:

html<p>
  some long text
</p>

cssp {
  font-size: 18px;
  line-height: 2.5;
  text-align: justify;
}

Результат:

उदाहरण

अगर line-height को font-size से छोटा कर दें, तो लाइनें एक दूसरे के ऊपर चढ़ जाएंगी:

html<p>
  some long text
</p>

cssp {
  font-size: 18px;
  line-height: 13px;
  text-align: justify;
}

Результат: