CSS တွင် em ယူနစ်များ မိတ်ဆက်ခြင်း

em ယူနစ်များသည် မိဘ element ၏ ဖောင့်အရွယ်အစား၏ ရာခိုင်နှုန်းအဖြစ် ဖောင့်အရွယ်အစားကို သတ်မှတ်ခွင့်ပြုသည်။ ဥပမာတစ်ခုကြည့်ကြရအောင်။

ကျွန်ုပ်တို့တွင် အောက်ပါအတိုင်း ထည့်သွင်းထားသော tag များ ရှိသည်ဆိုပါစို့။

<div>
	<p>
		စာသား
	</p>
</div>

ကျွန်ုပ်တို့၏ div အတွက် ဖောင့်အရွယ်အစားကို သတ်မှတ်ကြပါစို့။

div {
	font-size: 20px;
}

ပြီးလျှင် စာပိုဒ်အတွက် 2em ဖြင့် အရွယ်အစားသတ်မှတ်ကြပါစို့။ ဤတန်ဖိုးသည် မိဘ element ၏ ဖောင့်အရွယ်အစားထက် နှစ်ဆကြီးသော ဖောင့်အရွယ်အစားနှင့် ကိုက်ညီပါသည်။

p {
	font-size: 2em; /* 40px နှင့် ကိုက်ညီသည် */
}

ယခု စာပိုဒ်အတွက် 0.5em ဖြင့် အရွယ်အစားသတ်မှတ်ကြပါစို့။ ဤတန်ဖိုးသည် မိဘ element ၏ ဖောင့်အရွယ်အစား၏ တစ်ဝက်နှင့် ကိုက်ညီပါသည်။

p {
	font-size: 0.5em; /* 10px နှင့် ကိုက်ညီသည် */
}

1em တန်ဖိုးသည် စာပိုဒ်၏ ဖောင့်ကို မိဘ div ၏ ဖောင့်နှင့် အတူတူဖြစ်အောင် ပြုလုပ်ပေးပါမည်။

p {
	font-size: 1em; /* 20px နှင့် ကိုက်ညီသည် */
}

လက်တွေ့လေ့ကျင့်ခန်းများ

ကျွန်ုပ်တို့အတွက် ပြဿနာများကို ဖြေရှင်းမည့် HTML code တစ်ခု ရှိသည်ဆိုပါစို့။

<ul>
	<li>စာသား</li>
	<li>စာသား</li>
	<li>စာသား</li>
</ul>

အောက်ပါ code ကို လုပ်ဆောင်ခြင်း၏ ရလဒ်အဖြစ် li tag များတွင် px ဖြင့် မည်သည့်ဖောင့်အရွယ်အစား ရှိမည်ကို ဆုံးဖြတ်ပါ။

ul {
	font-size: 10px;
}
li {
	font-size: 2em;
}

ul {
	font-size: 20px;
}
li {
	font-size: 1.5em;
}

ul {
	font-size: 30px;
}
li {
	font-size: 0.5em;
}