Īpašība line-height

Īpašība line-height iestata intervālu starp teksta rindām (rindas intervālu).

Īpašība nenorada atstarpi starp teksta rindām, ka varētu šķist, tā nosaka teksta līnijas augstumu. Tas nozīmē, ka reālā atstarpe starp rindām tiks aprēķināta šādi: line-height - font-size = attālums starp teksta rindām. Vai otrādi line-height = font-size + attālums starp teksta rindām.

Sintakse

selektors {
	line-height: vērtība;
}

Vērtības

Īpašības vērtību var norādīt jebkuras vienības izmēriem. Norādot vērtību % rindas intervāls būs procentos no fonta izmēra.

Turklāt var norādīt jebkuru skaitli, kas lielāks par nulli. Šajā gadījumā tas tiek uztverts ka reizinātājs no fonta izmēra. Piemēram, ja font-size ir vērtība 20px, un line-height - 1.5, tad tas ir tas pats, kas rakstīt line-height: 30px (20px * 1.5 = 30px).

Pēc noklusējuma īpašības vērtība ir normal, šajā gadījumā pārlūkprogramma izvēlas rindas intervālu automātiski.

Piemērs

Šajā piemērā attālums starp teksta rindām būs line-height - font-size = 38px - 18px = 20px:

<p>
	some long text
</p>

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

Piemērs

Samazināsim atstarpi līdz 25px - 18px = 7px:

<p>
	some long text
</p>

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

Piemērs

Šajā piemērā attālums starp teksta rindām būs line-height - font-size = 18px - 18px = 0px - rindas praktiski salipīsies (augšējās rindas burtu astes skars apakšējās rindas burtu astes):

<p>
	some long text
</p>

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

Piemērs

Šajā piemērā vērtība line-height - reizinātājs 1.5 no fonta izmēra. Tāpēc line-height būs ekvivalents font-size * 1.5 = 18px * 1.5 = 27px. Un reālā atstarpe starp rindām būs line-height - font-size = 27px - 18px = 9px:

<p>
	some long text
</p>

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

Piemērs

Palielināsim reizinātāju:

<p>
	some long text
</p>

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

Piemērs

Ja izveido line-height mazāku par font-size, tad rindas pavisam uzkāps viena virs otras:

<p>
	some long text
</p>

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