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

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

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

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

p {
	font-size: 20px;
}

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

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

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

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

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

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

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

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

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

အောက်ပါကုဒ်ကို အကောင်အထည်ဖော်သည့် ရလဒ်အဖြစ် div tag များတွင် px ဖြင့် ဖောင့်အရွယ်အစားနှင့် အကွာအဝေး မည်မျှရှိမည်ကို ဆုံးဖြတ်ပါ။

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

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

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

အောက်ပါကုဒ်ကို အကောင်အထည်ဖော်သည့် ရလဒ်အဖြစ် p tag များတွင် px ဖြင့် ဖောင့်အရွယ်အစားနှင့် အကွာအဝေး မည်မျှရှိမည်ကို ဆုံးဖြတ်ပါ။

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

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