line-height ගුණය

line-height ගුණය පෙළ පේළි අතර අන්තර්අවකාශය (පේළිය අතර අන්තර්අවකාශය) සකසයි.

මෙම ගුණය පෙළ පේළි අතර හිස්තැන් ප්‍රමාණයක් සෘජුව සකසන්නේ නැත, එය පෙනෙන පරිදි, එය සකසන්නේ පෙළ රේඛාවේ උසයි. මෙයින් අදහස් කරන්නේ පේළි අතර සැබෑ හිස්තැන් ප්‍රමාණය මෙලෙස ගණනය කරන බවයි: line-height - font-size = පෙළ පේළි අතර දුර. හෝ අනෙක් ආකාරයට line-height = font-size + පෙළ පේළි අතර දුර.

වාග්-රීතිය

cssතේරීම් කරු {
  line-height: අගය;
}

අගයන්

ගුණයේ අගය ලෙස ඕනෑම ප්‍රමාණ සඳහා ඒකක විය හැකිය. % වලින් අගයක් දක්වන විට පේළිය අතර අන්තර්අවකාශය අකුරු මෝස්තරයේ ප්‍රමාණයේ ප්‍රතිශතයක් වනු ඇත.

ඊට අමතරව, අගය ලෙස ශුන්‍යයට වඩා වැඩි ඕනෑම අංකයක් දැක්විය හැකිය. මෙම අවස්ථාවේදී එය ගනු ලබන්නේ අකුරු මෝස්තරයේ ප්‍රමාණයේ ගුණකයක් ලෙසයි. උදාහරණයක් ලෙස, font-size හි අගය 20px නම්, line-height හි අගය - 1.5 නම්, මෙය line-height: 30px ලිවීමට සමාන වේ (20px * 1.5 = 30px).

පෙරනිමියෙන් ගුණයට normal අගය ඇත, මෙම අවස්ථාවේදී බ්‍රවුසරය පේළිය අතර අන්තර්අවකාශය ස්වයංක්‍රීයව තෝරා ගනී.

උදාහරණය

මෙම උදාහරණයේ දී පෙළ පේළි අතර දුර line-height - font-size වේ = 38px - 18px = 20px:

html<p>
  some long text
</p>

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

Результат:

උදාහරණය

හිස්තැන් ප්‍රමාණය 25px - 18px දක්වා අඩු කරමු = 7px:

html<p>
  some long text
</p>

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

Результат:

උදාහරණය

මෙම උදාහරණයේ දී පෙළ පේළි අතර දුර line-height - font-size වේ = 18px - 18px = 0px - පේළි ප්‍රායෝගිකව එකට ඇලෙනු ඇත (ඉහළ පේළියේ අකුරුවල වලිග පහළ පේළියේ අකුරුවල වලිග ස්පර්ශ කරනු ඇත):

html<p>
  some long text
</p>

cssp {
  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:

html<p>
  some long text
</p>

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

Результат:

උදාහරණය

ගුණකය වැඩි කරමු:

html<p>
  some long text
</p>

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

Результат:

උදාහරණය

line-height හි අගය font-size ට වඩා අඩු කළහොත්, පේළි එකිනෙකා මත ගසා යනු ඇත:

html<p>
  some long text
</p>

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

Результат: