Vetia line-height

Vetia line-height përcakton hapësirën midis rreshtave të tekstit (hapësirën ndërreshtore).

Vetia nuk përcakton hapësirën midis rreshtave të tekstit, siç mund të duket, ajo përcakton lartësinë e linjës së tekstit. Kjo do të thotë se hapësira aktuale midis rreshtave do të llogaritet kështu: line-height - font-size = distanca midis rreshtave të tekstit. Ose anasjelltas line-height = font-size + distanca midis rreshtave të tekstit.

Sintaksa

përzgjedhësi {
	line-height: vlera;
}

Vlerat

Si vlera të vetisë shërbejnë çdo njësi për përmasat. Kur përcaktohet vlera në % hapësira ndërreshtore do të jetë në përqindje të madhësisë së shkronjave.

Përveç kësaj, mund të caktoni si vlerë çdo numër më të madh se zero. Në këtë rast ajo perceptohet si shumëzues i madhësisë së shkronjave. Për shembull, nëse font-size ka vlerën 20px, dhe line-height - 1.5, atëherë kjo është e njëvlershme me të shkruarit line-height: 30px (20px * 1.5 = 30px).

Si parazgjedhje, vetia ka vlerën normal, në këtë rast shfletuesi zgjedh hapësirën ndërreshtore automatikisht.

Shembull

Në këtë shembull distanca midis rreshtave të tekstit do të jetë line-height - font-size = 38px - 18px = 20px:

<p>
	some long text
</p>

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

Shembull

Le të zvogëlojmë hapësirën në 25px - 18px = 7px:

<p>
	some long text
</p>

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

Shembull

Në këtë shembull distanca midis rreshtave të tekstit do të jetë line-height - font-size = 18px - 18px = 0px - rreshtat praktikisht do të ngjiten (bishtat e shkronjave të rreshtit të sipërm do të prekin bishtat e shkronjave të rreshtit të poshtëm):

<p>
	some long text
</p>

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

Shembull

Në këtë shembull vlera line-height - është shumëzues 1.5 i madhësisë së shkronjave. Prandaj line-height do të jetë ekuivalente me font-size * 1.5 = 18px * 1.5 = 27px. Dhe hapësira aktuale midis rreshtave do të jetë line-height - font-size = 27px - 18px = 9px:

<p>
	some long text
</p>

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

Shembull

Le të rrisim shumëzuesin:

<p>
	some long text
</p>

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

Shembull

Nëse bëhet line-height më e vogël se font-size, rreshtat do të mbivendosen plotësisht:

<p>
	some long text
</p>

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