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;
}