Savybė line-height

Savybė line-height nustato intervalą tarp teksto eilučių (tarp eilučių intervalą).

Savybė nenustato atstumo tarp teksto eilučių, kaip galėtų atrodyti, ji nustato teksto eilutės aukštį. Tai reiškia, kad tikrasis atstumas tarp eilučių bus skaičiuojamas taip: line-height - font-size = atstumas tarp teksto eilučių. Arba atvirkščiai line-height = font-size + atstumas tarp teksto eilučių.

Sintaksė

selektorius {
	line-height: reikšmė;
}

Reikšmės

Savybės reikšmėmis gali būti bet kokie dydžių vienetai. Nurodant reikšmę % tarp eilučių intervalas bus procentais nuo šrifto dydžio.

Be to, galima nustatyti bet kurį skaičių didensį už nulį. Šiuo atveju jis suvokiamas kaip daugiklis nuo šrifto dydžio. Pavyzdžiui, jei font-size turi reikšmę 20px, o line-height - 1.5, tai lygu tam, kas parašyta line-height: 30px (20px * 1.5 = 30px).

Pagal nutylėjimą savybė turi reikšmę normal, šiuo atveju naršyklė parenka tarp eilučių intervalą automatiškai.

Pavyzdys

Šiame pavyzdyje atstumas tarp teksto eilučių bus line-height - font-size = 38px - 18px = 20px:

<p>
	some long text
</p>

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

Pavyzdys

Sumažinkime tarpą iki 25px - 18px = 7px:

<p>
	some long text
</p>

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

Pavyzdys

Šiame pavyzdyje atstumas tarp teksto eilučių bus line-height - font-size = 18px - 18px = 0px - eilutės praktiškai susilies (viršutinės eilutės raidžių uodegelės liestis apatinės eilutės raidžių uodegeles):

<p>
	some long text
</p>

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

Pavyzdys

Šiame pavyzdyje reikšmė line-height - daugiklis 1.5 nuo šrifto dydžio. Vadinasi line-height bus ekvivalentiška font-size * 1.5 = 18px * 1.5 = 27px. O tikrasis tarpas tarp eilučių bus line-height - font-size = 27px - 18px = 9px:

<p>
	some long text
</p>

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

Pavyzdys

Padidinkime daugiklį:

<p>
	some long text
</p>

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

Pavyzdys

Jei padaryti line-height mažesnį už font-size, tai eilutės apskritai užlips viena ant kitos:

<p>
	some long text
</p>

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