Line-height xususiyati

line-height xususiyati matn qatorlari orasidagi intervalni (qatorlar oralig‘ini) belgilaydi.

Xususiyat, ko‘rinadigan bo‘lsa ham, matn qatorlari orasidagi bo‘shliqni belgilamaydi, balki matn qatorining balandligini belgilaydi. Bu shuni anglatadiki, qatorlar orasidagi haqiqiy masofa quyidagicha hisoblanadi: line-height - font-size = matn qatorlari orasidagi masofa. Yoki aksincha line-height = font-size + qatorlar orasidagi masofa.

Sintaksis

cssselector {
  line-height: qiymat;
}

Qiymatlar

Xususiyat qiymati sifatida har qanday o‘lchov birliklari ishlatilishi mumkin. % da qiymat ko‘rsatilganda, qatorlar oralig‘i shrift o‘lchamining foizida bo‘ladi.

Bundan tashqari, qiymat sifatida noldan katta har qanday son berish mumkin. Bu holda u shrift o‘lchamiga ko‘paytiruvchi sifatida qabul qilinadi. Misol uchun, agar font-size ning qiymati 20px, line-height ning qiymati esa 1.5 bo‘lsa, bu line-height: 30px deb yozishga teng (20px * 1.5 = 30px).

Xususiyatning standart qiymati normal, bu holda brauzer qatorlar oralig‘ini avtomatik tanlaydi.

Misol

Bu misolda matn qatorlari orasidagi masofa line-height - font-size = 38px - 18px = 20px bo‘ladi:

html<p>
  some long text
</p>

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

Результат:

Misol

Oraliqni 25px - 18px = 7px gacha kamaytiramiz:

html<p>
  some long text
</p>

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

Результат:

Misol

Bu misolda matn qatorlari orasidagi masofa line-height - font-size = 18px - 18px = 0px bo‘ladi - qatorlar deyarli bir-biriga yopishib qoladi (yuqori qatordagi harflarning quyruqlari pastki qatordagi harflarning quyruqlariga tegganday bo‘ladi):

html<p>
  some long text
</p>

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

Результат:

Misol

Bu misolda line-height ning qiymati - shrift o‘lchamiga nisbatan 1.5 ko‘paytmasidir. Shuning uchun line-height quyidagiga teng bo‘ladi: font-size * 1.5 = 18px * 1.5 = 27px. Va qatorlar orasidagi haqiqiy masofa line-height - font-size = 27px - 18px = 9px bo‘ladi:

html<p>
  some long text
</p>

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

Результат:

Misol

Koeffitsientni oshiramiz:

html<p>
  some long text
</p>

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

Результат:

Misol

Agar line-height ni font-size dan kichik qilinsa, qatorlar umuman bir-birining ustiga chiqadi:

html<p>
  some long text
</p>

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

Результат: