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