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