თვისება line-height

თვისება line-height ადგენს ტექსტის სტრიქონებს შორის ინტერვალს (სტრიქონებს შორის ინტერვალს).

თვისება არ ადგენს ტექსტის სტრიქონებს შორის უფსკრულს, როგორც შეიძლება, ეჩვენებოდეს, ის ადგენს ტექსტის ხაზის სიმაღლეს. ეს ნიშნავს, რომ სტრიქონებს შორის რეალური უფსკრული გამოითვლება ასე: line-height - font-size = მანძილი ტექსტის სტრიქონებს შორის. ან პირიქით line-height = font-size + მანძილი ტექსტის სტრიქონებს შორის.

სინტაქსი

სელექტორი {
	line-height: მნიშვნელობა;
}

მნიშვნელობები

თვისების მნიშვნელობა შეიძლება იყოს ნებისმიერი ზომის ერთეული. %-ში მნიშვნელობის მითითებისას სტრიქონებს შორის ინტერვალი იქნება ფონტის ზომის პროცენტულად.

გარდა ამისა, შესაძლებელია მნიშვნელობის მითითება ნებისმიერი ნულზე მეტი რიცხვით. ამ შემთხვევაში ის აღიქმება როგორც ფონტის ზომის მამრავლი. მაგალითად, თუ font-size-ს აქვს მნიშვნელობა 20px, ხოლო line-height - 1.5, მაშინ ეს იგივეა, რაც დაწეროთ line-height: 30px (20px * 1.5 = 30px).

ნაგულისხმევად, თვისებას აქვს მნიშვნელობა normal, ამ შემთხვევაში ბრაუზერი თვითონ ირჩევს სტრიქონებს შორის ინტერვალს.

მაგალითი

ამ მაგალითში ტექსტის სტრიქონებს შორის მანძილი იქნება line-height - font-size = 38px - 18px = 20px:

<p>
	some long text
</p>

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

მაგალითი

შევამციროთ უფსკრული 25px - 18px = 7px-მდე:

<p>
	some long text
</p>

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

მაგალითი

ამ მაგალითში ტექსტის სტრიქონებს შორის მანძილი იქნება line-height - font-size = 18px - 18px = 0px - სტრიქონები პრაქტიკულად შეეწებება ერთმანეთს (ზედა სტრიქონის ასოების კუდები შეეხება ქვედა სტრიქონის ასოების კუდებს):

<p>
	some long text
</p>

p {
	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:

<p>
	some long text
</p>

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

მაგალითი

გავზარდოთ მამრავლი:

<p>
	some long text
</p>

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

მაგალითი

თუ line-height font-size-ზე ნაკლებს გავხდით, სტრიქონები ერთმანეთს მთლიანად დაეფარება:

<p>
	some long text
</p>

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