CSS တွင် အကွာအဝေးများနှင့် em ယူနစ်များ

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

html<div>
  <p>
    text
  </p>
</div>

စာပိုဒ်၏ ဖောင့်အရွယ်အစားကို px ဖြင့် သတ်မှတ်ထားသည်ဆိုပါစို့။

cssp {
  font-size: 20px;
}

ယခု ဤစာပိုဒ်၏ margin ကိ် em ယူနစ်များဖြင့် သတ်မှတ်ကြပါစို့။ ဤကိစ္စတွင် အကွာအဝေး၏ အရွယ်အစားသည် ၎င်း၏မိဘမှ မဟုတ်ဘဲ စာပိုဒ်၏ ဖောင့်အရွယ်အစားမှ တွက်ချက်သတ်မှတ်ပါလိမ့်မည်။

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

ယခု စာပိုဒ်အား em ဖြင့် အရွယ်အစားသတ်မှတ်ထားသည်ဆိုပါစို့။

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

ယခု ကျွန်ုပ်တို့၏ element အတွက် margin ကို ပြန်သတ်မှတ်ကြပါစို့။ ဤကိစ္စတွင် ၎င်းသည် မိမိ element ၏ လက်ရှိဖောင့်တန်ဖိုးမှ တွက်ချက်သတ်မှတ်နေဆဲဖြစ်သည်။ ဤသို့ဖြစ်ချိန်တွင် ဖောင့်တန်ဖိုးကိုယ်တိုင်သည် မိဘ element အပေါ်မူတည်၍ တွက်ချက်သတ်မှတ်ပါလိမ့်မည်။

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

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

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

html<section>
  <div>
    <p>
      text
    </p>
  </div>
</section>

csssection {
  font-size: 10px;
}
div {
  font-size: 2em;
  margin: 2em;
}

csssection {
  font-size: 10px;
}
div {
  font-size: 2em;
  margin: 3em;
}

csssection {
  font-size: 10px;
}
div {
  font-size: 2em;
  margin: 0.5em;
}

csssection {
  font-size: 10px;
}
div {
  font-size: 2em;
}
p {
  font-size: 2em;
  margin: 2em;
}

csssection {
  font-size: 10px;
}
div {
  font-size: 1.5em;
}
p {
  font-size: 1em;
  margin: 1.5em;
}