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