JavaScript အတွက် CSS တွင် အစိတ်အပိုင်းများကို တိုးချဲ့ခြင်း

CSS ၏ width နှင့် height ဂုဏ်သတ္တိများကို သတ်မှတ်ခြင်းသည် အစိတ်အပိုင်းသည် သတ်မှတ်ထားသည့်အရွယ်အစား ဖြစ်လာမည်ဟု အာမခံချက်မပေးပါ။ ဥပမာများဖြင့် ကြည့်ရှုကြပါစို့။

ဥပမာ

လက်ရှိတွင် အစိတ်အပိုင်း၏ အရွယ်အစားများသည် သတ်မှတ်ထားသည်များနှင့် ကိုက်ညီနေပါသည်:

<div id="elem">
	text
</div>

#elem {
	width: 200px;
	height: 200px;
	margin: 50px auto;
	background: #CFF5BF;
}

ဥပမာ

ယခု အစိတ်အပိုင်းအား padding ဂုဏ်သတ္တိကို သတ်မှတ်ကြည့်ပါမည်။ ရလဒ်အနေဖြင့် အစိတ်အပိုင်း၏ အမှန်တကယ် အနံသည် ပိုကြီးလာပြီး သတ်မှတ်ထားသော အတွင်းဘက် ခြားနားချက် တန်ဖိုးဖြင့် တိုးချဲ့သွားပါမည်:

<div id="elem">
	text
</div>

#elem {
	padding: 25px;
	width: 200px;
	height: 200px;
	margin: 50px auto;
	background: #CFF5BF;
}

ဥပမာ

နယ်နမိတ်ကြောင်း ရှိခြင်းသည်လည်း အစိတ်အပိုင်းကို တိုးချဲ့စေပါသည်:

<div id="elem">
	text
</div>

#elem {
	width: 200px;
	height: 200px;
	margin: 50px auto;
	background: #CFF5BF;
	border: 20px solid #F0D7A1;
}

ဥပမာ

box-sizing ဂုဏ်သတ္တိသည် အထက်ဖော်ပြပါ အပြုအမူကို ပြောင်းလဲခွင့်ပေးပါသည်။ အတွင်းဘက် ခြားနားချက် သို့မဟုတ် နယ်နမိတ်ကြောင်းတို့က အစိတ်အပိုင်းကို မတိုးချဲ့စေရန် ပြုလုပ်နိုင်ပါသည်။ ထိုသို့ပြုလုပ်ရန် ဤဂုဏ်သတ္တိအား border-box တန်ဖိုးကို သတ်မှတ်ပေးရပါမည်:

<div id="elem">
	text
</div>

#elem {
	box-sizing: border-box;
	padding: 20px;
	width: 200px;
	height: 200px;
	margin: 50px auto;
	background: #CFF5BF;
	border: 20px solid #F0D7A1;
}

ဖော်ပြပါအရာကို နားလည်ရခြင်း၏ အရေးပါမှု

JavaScript ၏ ရှုထောင့်မှ ကြည့်လျှင် ဖော်ပြပါအခြေအနေသည် သိပ်အဆင်ပြေသည်မဟုတ်ပါ။ ဘာကြောင့်ဆိုသော် width ဂုဏ်သတ္တိ၏ တန်ဖိုးကို ဖတ်ပြီးပါက အစိတ်အပိုင်းသည် ထိုအနံအတိအကျ ရှိမည်ဟု ကျွန်ုပ်တို့ အာမခံချက်မရနိုင်တော့ပါ။