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

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

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

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

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

cssdiv {
  font-size: 20px;
}

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

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

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

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

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

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

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

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

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

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

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

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